CSS Свойство объектной подгонки
Свойство CSS object-fit
используется для указания того, как следует изменять размер <img> или <video>, чтобы они соответствовали его контейнеру.
Свойство CSS object-fit
Свойство CSS object-fit
используется для указания того, как следует изменять размер <img> или <video>, чтобы они соответствовали его контейнеру.
Это свойство указывает содержимому заполнять контейнер различными способами; например, «сохранить это соотношение сторон» или «растянуться и занять как можно больше места».
Посмотрите на следующее изображение из Парижа. Это изображение имеет ширину 400 пикселей и высоту 300 пикселей:
Однако, если мы настроим изображение выше так, чтобы оно составляло половину его ширины (200 пикселей) и ту же высоту (300 пикселей), оно будет выглядеть так:
Пример
img {
width: 200px;
height:
300px;
}
Мы видим, что изображение сжимается, чтобы поместиться в контейнер размером 200x300 пикселей (его исходное соотношение сторон нарушено).
Вот здесь и появляется object-fit
свойство. object-fit
Свойство может принимать одно из следующих значений:
fill
- Это по умолчанию. Размер изображения изменяется, чтобы заполнить заданное измерение. При необходимости изображение будет растянуто или сжато, чтобы соответствоватьcontain
- Изображение сохраняет соотношение сторон, но его размер изменяется в соответствии с заданным размером.cover
- Изображение сохраняет соотношение сторон и заполняет заданное измерение. Изображение будет обрезано по размеруnone
- Размер изображения не изменяетсяscale-down
- изображение уменьшено до самой маленькой версииnone
илиcontain
Использование объектной подгонки: обложка;
Если мы используем object-fit: cover;
изображение, оно сохраняет соотношение сторон и заполняет заданное измерение. Изображение будет обрезано по размеру:
Пример
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Использование объектной подгонки: содержите;
Если мы используем object-fit: contain;
изображение, оно сохраняет соотношение сторон, но изменяется в соответствии с заданным размером:
Пример
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Использование объектной подгонки: заливка;
Если мы используем object-fit: fill;
, размер изображения изменяется, чтобы заполнить заданное измерение. При необходимости изображение будет растянуто или сжато, чтобы соответствовать:
Пример
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Использование объектной подгонки: нет;
Если мы используем object-fit: none;
изображение без изменения размера:
Пример
img {
width: 200px;
height:
300px;
object-fit: none;
}
Использование объектной подгонки: уменьшение масштаба;
Если мы используем object-fit: scale-down;
изображение, оно уменьшается до наименьшей версии none
или
contain
:
Пример
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Другой пример
Здесь у нас есть два изображения, и мы хотим, чтобы они заполняли 50% ширины окна браузера и 100% высоты.
В следующем примере мы НЕ используем object-fit
, поэтому при изменении размера окна браузера соотношение сторон изображений будет нарушено:
Пример
В следующем примере мы используем object-fit: cover;
, поэтому при изменении размера окна браузера соотношение сторон изображений сохраняется:
Пример
CSS объект-подгонка Дополнительные примеры
Следующий пример демонстрирует все возможные значения object-fit
свойства в одном примере:
Пример
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Объект CSS-* Свойства
В следующей таблице перечислены свойства CSS object-*:
Property | Description |
---|---|
object-fit | Specifies how an <img> or <video> should be resized to fit its container |
object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |