Объект подходит - CSS-хитрости

В object-fitсобственности определяет , как элемент реагирует на высоту и ширину его содержимого коробки. Он предназначен для изображений, видео и других встраиваемых мультимедийных форматов вместе с object-positionсобственностью. Используемый сам по себе, object-fitпозволяет нам обрезать встроенное изображение, давая нам детальный контроль над тем, как оно сжимается и растягивается внутри своего поля.

object-fit можно задать одно из этих пяти значений:

fill: это значение по умолчанию, которое растягивает изображение до размера поля содержимого, независимо от его соотношения сторон.
contain: увеличивает или уменьшает размер изображения, чтобы заполнить поле, сохраняя его соотношение сторон.
cover: изображение будет заполнять высоту и ширину своего поля, снова сохраняя его соотношение сторон, но часто в процессе обрезая изображение.
none: image проигнорирует высоту и ширину родительского элемента и сохранит исходный размер.
scale-down: изображение сравнивает разницу между noneи containдля определения наименьшего размера конкретного объекта.

Вот как мы можем установить это свойство:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Поскольку второе изображение имеет соотношение сторон, отличное от исходного изображения слева, оно будет растягиваться за пределы области своего содержимого, обрезая верхнюю и нижнюю части изображения.

Стоит отметить, что по умолчанию изображение центрируется в поле содержимого, но это можно изменить с помощью object-positionсвойства.

Демо

В приведенной ниже демонстрации показаны пять примеров, в которых подробно описывается, как мы можем захотеть, чтобы изображение сжималось в поле содержимого, которое иногда меньше или больше его исходной ширины (измените размер браузера, чтобы лучше понять, как это может работать):

См. Подборку объекта Pen Робина Рендла (@robinrendle) на CodePen.

Если содержимое изображения не заполняет поле содержимого по какой-либо причине, тогда в незаполненном пространстве будет отображаться фон элемента, в данном случае светло-серый фон.

Поддержка браузера

Стоит отметить, что iOS 8-9.3 и Safari 7-9.1 в object-fitсобственности, но не в собственности object-position.

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.