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;
Если мы используем object-fit: cover; изображение сохраняет свое соотношение сторон и заполняет заданный размер. Изображение будет обрезано по размеру:
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Попробуйте сами »
Использовать object-fit: contain;
Если мы используем object-fit: contain; изображение сохраняет свое соотношение сторон, но изменяется так, чтобы соответствовать заданному размеру:
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Попробуйте сами »
Использовать object-fit: fill;
Если мы используем object-fit: fill;, размер изображения будет изменен, чтобы заполнить заданный размер. При необходимости изображение будет растянуто или сжато по размеру:
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Попробуйте сами »
Использовать object-fit: none;
Если мы используем object-fit: none; размер изображения не изменяется:
img {
width: 200px;
height:
300px;
object-fit: none;
}
Попробуйте сами »
Использовать object-fit: scale-down;
Если мы используем 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 больше примеров
Следующий пример демонстрирует все возможные значения свойства 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 Свойства object-*
В следующей таблице перечислены свойства CSS object-*:
| Свойства | Описание |
|---|---|
| object-fit | Указывает, как следует изменять размер <img> или <видео>, чтобы соответствовать его контейнеру |
| object-position | Указывает, как <img> или <video> должно располагаться с координатами x/y внутри его "собственного поля содержимого" |