Как масштабировать и обрезать изображения с помощью CSS object-fit
Введение
Скорее всего, вы столкнетесь со сценарием, когда захотите сохранить исходное соотношение сторон при работе с изображениями. Сохранение соотношения сторон предотвратит искажение изображений из-за растяжения или сжатия. Распространенным решением этой проблемы является использование CSS-свойства background-image
. Более современным подходом было бы использование CSS-свойства object-fit
.
В этой статье вы изучите эффекты fill
, cover
, contain
, none
и значения масштабирования
, доступные для свойства CSS object-fit
, и то, как оно может обрезать и масштабировать изображения. Вы также изучите свойство CSS object-position
и то, как оно может смещать изображения.
Предпосылки
Если вы хотите следовать этой статье, вам понадобятся:
- Знакомство со свойствами и значениями CSS.
- Использование объявлений CSS, встроенных в свойство
style
. - Редактор кода.
- Современный веб-браузер, поддерживающий
object-fit
иobject-position
.
Наблюдение за поведением образца изображения по умолчанию
Рассмотрим следующий код, используемый для отображения образца изображения:
<img
src="https://assets.linux-console.net/articles/alligator/css/object-fit/example-object-fit.jpg"
width="600"
height="337"
style="width: 600px; height: 337px;"
alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>
Этот код выдаст следующий результат в браузере:
Это изображение имеет исходную ширину 1200 пикселей и высоту 674 пикселей. Используя атрибуты img
, ширина была установлена на 600
и 337
— половина исходных размеров — с сохранением соотношения сторон.
Теперь рассмотрим ситуацию, когда макет предполагает, что изображения будут занимать ширину 300 пикселей и высоту 337 пикселей:
<img
src="https://assets.linux-console.net/articles/alligator/css/object-fit/example-object-fit.jpg"
width="600"
height="337"
style="width: 300px; height: 337px;"
alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>
Этот код выдаст следующий результат в браузере:
Полученное изображение больше не сохраняет исходное соотношение сторон и кажется визуально «сплющенным».
Использование объектной подгонки: заполнить
Значение fill
— это начальное значение для object-fit
. Это значение не сохранит исходное соотношение сторон.
<img
...
style="width: 300px; height: 337px; object-fit: fill;"
...
/>
Этот код выдаст следующий результат в браузере:
Поскольку это «начальное» значение для механизмов рендеринга браузера, внешний вид масштабированного изображения не изменится. Результирующее изображение по-прежнему выглядит сжатым.
Использование объектной подгонки: обложка
Значение cover
сохраняет исходное соотношение сторон, но изображение занимает все доступное пространство.
<img
...
style="width: 300px; height: 337px; object-fit: cover;"
...
/>
Этот код выдаст следующий результат в браузере:
В некоторых случаях object-fit: cover
приводит к обрезанию изображения. В этом примере изображения некоторые части исходного изображения слева и справа не отображаются, потому что они не помещаются в пределах заявленной ширины.
Использование объектной подгонки: содержит
Значение contain
сохраняет исходное соотношение сторон, но изображение также не выходит за пределы доступного пространства.
<img
...
style="width: 300px; height: 337px; object-fit: contain;"
...
/>
Этот код выдаст следующий результат в браузере:
В определенных ситуациях object-fit: contains
приведет к тому, что изображение не заполнит все доступное пространство. В этом примере изображения есть вертикальное пространство над и под изображением, потому что заявленная высота больше, чем высота в уменьшенном масштабе.
Использование объектной подгонки: нет
Значение none
вообще не изменяет размер изображения.
<img
...
style="width: 300px; height: 337px; object-fit: none;"
...
/>
Этот код выдаст следующий результат в браузере:
В ситуациях, когда изображение больше доступного места, оно будет обрезано. В этом примере изображения некоторые части исходного изображения слева, справа, сверху и снизу не отображаются, потому что они не могут уместиться в пределах заявленной ширины и высоты.
Использование объектной подгонки: уменьшение масштаба
Значение scale-down
будет отображать изображение типа contain
или none
, в зависимости от того, что приведет к уменьшению изображения.
<img
...
style="width: 300px; height: 337px; object-fit: scale-down;"
...
/>
Этот код выдаст следующий результат в браузере:
В этом примере изображение было уменьшено, чтобы вести себя как contain
.
Использование объектной подгонки и объектной позиции
Если результирующее изображение из object-fit
кажется обрезанным, по умолчанию изображение будет отображаться по центру. Свойство object-position
можно использовать для изменения точки фокусировки.
Рассмотрим приведенный выше пример object-fit: cover
:
Теперь давайте изменим положение видимой части изображения по оси X, чтобы открыть самый правый край изображения:
<img
...
style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
...
/>
Этот код выдаст следующий результат в браузере:
В этом примере изображения черепаха была обрезана.
И, наконец, давайте посмотрим, что произойдет, если позиция будет указана за пределами доступного пространства:
<img
...
style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
...
/>
Этот код выдаст следующий результат в браузере:
В этом примере изображения головы черепахи и аллигатора были обрезаны. Существует также интервал, чтобы компенсировать 20% смещения слева от изображения.
Заключение
В этой статье вы изучили значения, доступные для свойств CSS object-fit
и object-position
.
object-fit
также поддерживает наследование, инициализацию и удаление.
Прежде чем использовать object-fit
в своем проекте, убедитесь, что он поддерживается в браузерах, используемых вашей целевой аудиторией, проверив поддержку браузера на странице «Можно ли использовать?».
Если вы хотите узнать больше о CSS, ознакомьтесь с нашей темой по CSS, где вы найдете упражнения и проекты по программированию.