Свойство object-fit

Описание

Управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана ширина или высота, а также способом масштабирования. Свойство может сохранять исходные пропорции элемента или наоборот, искажать пропорции, в угоду соблюдения размеров.

Синтаксис

object-fit: fill | contain | cover | none;
Значение Описание
fill Элемент масштабируется, чтобы соответствовать заданным размерам, при этом пропорции игнорируются.
contain Элемент масштабируется, чтобы целиком уместиться в заданные размеры с соблюдением пропорций.
cover Элемент увеличивается или уменьшается, чтобы целиком заполнить заданную область с сохранением пропорций.
none Сохраняются исходные пропорции элемента, установленные значения ширины или высоты не влияют на содержимое.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #test2 {
 height: 200px;
 width: 200px;
 background-color: #97dfc8;
 object-fit: contain;
 }
 </style>
 <img src='/files/images/regular/body-img.jpg' id='test2' alt='' />

</body>
</html>

Читайте также