Свойство -o-object-fit

Свойство -o-object-fit определяет, как контент элемента масштабируется относительно заданных размеров элемента или родительского элемента с заданными размерами.

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

Допустимые значения

• fill — изображение растягивается так, чтобы занять все доступное пространство, при этом пропорции рисунка могут искажаться;
• none — изображение не растягивается, а имеет свои собственные размеры;
• contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри элемента;
• cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область элемента.

Наглядное объяснение значений contain и cover можно посмотреть на странице CSS свойства background-size

Пример

По теме

• Вендорные префиксы. Что это?
• CSS свойство -o-object-position