Поиск по сайту:

Как масштабировать и обрезать изображения с помощью 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, где вы найдете упражнения и проекты по программированию.