Управление размерами изображений в CSS

Сохранение соотношения сторон предотвращает искажение изображений из-за растяжения или сжатия. Работая с CSS, вы, вероятно, рано или поздно попадете в ситуацию, когда вам будет нужно сохранить исходное соотношение сторон изображения. Очень часто для решения этой проблемы используется CSS-свойство background-image. Есть и более современный подход – это свойство object-fit.

В этом руководстве мы поговорим о таких значениях object-fit, как fill, cover, contain, none и scale-down. Мы обсудим, как они влияют на изображение в целом, а также как с их помощью можно обрезать и масштабировать изображения. Кроме того, вы изучите свойство object-position и увидите, как оно может смещать изображения.

Требования

  • Чтобы выполнить этот мануал, вам нужно знать, что такое свойства и значения CSS.
  • Вы должны уметь использовать декларации CSS, встроенные в свойство style.
  • Редактор кода.
  • Современный веб-браузер, поддерживающий object-fit and object-position.

Стандартное поведение изображений

В этом руководстве мы рассмотрим следующий код:

<img
  src="https://assets.digitalocean.com/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."
/>

В результате он выдает:

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.digitalocean.com/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."
/>

В браузере этот код покажет следующий результат:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

Полученное изображение больше не сохраняет исходное соотношение сторон и кажется визуально сжатым.

Как работает object-fit: fill

fill – это начальное значение object-fit. Оно не сохраняет исходное соотношение сторон.

<img
  ...
  style="width: 300px; height: 337px; object-fit: fill;"
  ...
/>

Этот код выдаст в браузере следующий результат:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

Поскольку это исходное значение для движков рендеринга в браузерах, внешний вид масштабированного изображения не меняется. Полученное изображение по-прежнему выглядит сжатым.

Как работает object-fit: cover

Значение cover сохраняет исходное соотношение сторон изображения, но изображение занимает все доступное пространство.

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>

Данный код покажет в браузере такой результат:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

В определенных ситуациях object-fit: cover может обрезать изображение. В этом примере некоторые части исходного изображения (слева и справа) не отображаются, потому что они не умещаются в пределах заявленной ширины.

Как работает object-fit: contain

Значение contain сохраняет исходное соотношение сторон, но при этом изображение не может выходить за пределы доступного пространства.

<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>

Этот код выдаст в браузере следующий результат:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

В некоторых ситуациях object-fit: contain приводит к тому, что изображение не может заполнить все доступное пространство. Как вы видите в данном примере, над и под изображением есть пустое горизонтальное пространство, потому что заявленная доступная высота больше, чем высота масштабированного изображения.

Как работает object-fit: none

Значение none вообще никак не изменяет размер изображения.

<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>

Этот код выдаст в браузере следующий результат:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

Если изображение больше доступного места, оно будет обрезано. В нашем примере некоторые части исходного изображения слева, справа, сверху и снизу не отображаются, потому что они не помещаются в границах заявленных ширины и высоты.

Как работает object-fit: scale-down

Значение scale-down будет отображать картинку либо как contain, либо как none – в зависимости от того, что именно выдаст наименьшее изображение.

<img
  ...
  style="width: 300px; height: 337px; object-fit: scale-down;"
  ...
/>

Этот код выдаст в браузере следующий результат:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

В этом примере изображение было уменьшено по принципу contain.

Как работают свойства object-fit и object-position

Если в результате object-fit выдает обрезанное изображение, оно по умолчанию будет центрировано. Для изменения точки фокуса можно использовать свойство object-position.

Вернемся к примеру object-fit: cover.

Теперь давайте изменим положение видимой части изображения по оси X, чтобы показать правый край изображения:

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>

Этот код покажет следующий результат:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

В этом примере фрагмент изображения с черепахой вырезан.

А теперь давайте посмотрим, что произойдет, если указать позицию за пределами доступного пространства:

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
  ...
/>

В результате получится:

Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337.

В этом примере изображение сдвинуто так, что мы видим только его левую часть. Кроме того, слева мы видим интервал, который составляет 20% доступного пространства.

Заключение

В этой статье мы рассмотрели доступные значения свойств object-fit и object-position.

object-fit также поддерживает ключевые слова inherit, initial и unset.

Прежде чем использовать свойство object-fit в своем проекте, убедитесь, что ваша целевая аудитория пользуется браузерами, которые его поддерживают.

Tags:

Добавить комментарий