В этой статье мы поговорим о двух свойствах CSS, о которых знают немногие веб-разработчики. Они называются object-fit и object-position, и оба имеют отношение к стилизации изображений и видео. Мы покажем вам, как их использовать, и подробно рассмотрим все важные характеристики.
Object-fit
Свойство object-fit может указать, как изображение (или видео) будет растягиваться или сжиматься, чтобы заполнить поле своего родительского контейнера. Это необходимо, когда у нас есть картинка, размер или соотношение сторон которой отличается от оборачивающего блока.
Традиционно, чтобы решить эту проблему, создают div и устанавливают background-image и background-size. Однако современный CSS позволяет нам просто добавить тег изображения <img> внутри, а затем применить object-fit непосредственно к селектору изображения:
img {
width: 100%;
object-fit: cover;
}Возможные значения:
- fill (по умолчанию) - ширина и высота изображения соответствуют ширине и высоте родителя. В большинстве случаев это нарушает соотношение сторон;
- cover - изображение сохраняет свое соотношение сторон и заполняет всё пространство родителя, а его не вместившиеся части обрезаются и не отображаются;
- contain - изображение сохраняет свое соотношение сторон и вписывается в пространство родителя;
- none - изображение принимает исходный размер и соотношение сторон;
- scale-down - отображается как одно из приведенных выше, в зависимости от того, какое из них выдает изображение наименьшего размера.
Давайте рассмотрим на примерах это свойство по отношению к вот такой картинке:
| Свойство | Демо |
| fill |
|
| cover |
|
| contain |
|
| none |
|
| scale-down |
|
Object-position
Это свойство определяет, где внутри контейнера будет располагаться изображение. Оно принимает два числовых значения: одно для вертикальной оси, а другое - для горизонтальной. Эти числа могут быть в процентах, пикселях или других единицах измерения и могут быть отрицательными. Также можно использовать некоторые ключевые слова, такие как center, top, right и т.д.
По-умолчанию изображение располагается в центре контейнера, поэтому значение по-умолчанию:
img {
object-position: center;
/* object-position: 50% 50%; - выполнит тоже самое */
}
Комментарии (0)