Как растянуть изображение, чтобы заполнить блок, сохраняя соотношение сторон изображения

Если вы можете использовать фоновые изображения, то решением будет следующий css:

.myClass {
  background-image: url(your/images/image.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Если вы используете теги картинок для их размещения, то для вас подойдет следующий вариант:

img {
  object-fit: cover;
}

И еще одним из вариантов будет комплексное использование CSS и JQuery

HTML

<div>
  <img class="cover-image" src="image.png" />
</div>

CSS

div {
  height: 300px;
  width: 450px;
}

Используем плагин JQuery — cover-image

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Используем так:

jQuery('.cover-image').coverImage();

Плагин возьмет изображение, установит его в качестве фонового изображения в блоке-оболочке изображения и удалит тег img из документа.