51. object-fit и object-position

CSS: object-fit и object-position - Урок стиля

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

Что такое object-fit?

Свойство object-fit определяет, как контент (например, изображение или видео) должен масштабироваться, чтобы поместиться в контейнер. Представьте себе, что у вас есть рамка (контейнер) и фотография (контент). object-fit говорит браузеру, как лучше всего “вписать” фотографию в рамку.

Доступны следующие значения:

fill (по умолчанию): Контент заполняет всю область контейнера, растягиваясь или сжимаясь, чтобы соответствовать размерам. Искажение пропорций возможно.
contain: Контент масштабируется так, чтобы полностью поместиться в контейнер, сохраняя пропорции. Могут оставаться пустые области.
cover: Контент масштабируется так, чтобы полностью заполнить контейнер, сохраняя пропорции. Часть контента может быть обрезана.
none: Контент отображается в своем исходном размере. Если он больше контейнера, то будет обрезан.
scale-down: Выбирает между none и contain, в зависимости от того, какое из них приведет к отображению контента меньшего размера.

Пример кода:

<div class="container">
  <img src="image.jpg" alt="Пример изображения">
</div>

.container {
  width: 200px;
  height: 150px;
  border: 1px solid black;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Меняйте значения, чтобы увидеть эффект */
}

Что такое object-position?

Свойство object-position определяет положение контента внутри контейнера, когда используется object-fit: cover или object-fit: contain и остаются свободные области или часть контента обрезана. Это похоже на то, как вы центрируете или перемещаете изображение внутри рамки. Значениями могут быть top, bottom, left, right, center или числовые значения в процентах или пикселях.

Пример кода:

<div class="container">
  <img src="image.jpg" alt="Пример изображения">
</div>

.container {
  width: 200px;
  height: 150px;
  border: 1px solid black;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* Меняйте значения, чтобы увидеть эффект */
}

Жизненный пример

Свойства object-fit и object-position широко используются в современных веб-проектах.

Адаптивные изображения: Обеспечивают корректное отображение изображений на разных устройствах и разрешениях. Часто используются в слайдерах и галереях.
Аватары пользователей: Позволяют обрезать и центрировать аватары пользователей, чтобы они хорошо выглядели в заданных рамках.
Карточки товаров в интернет-магазинах: Гарантируют, что изображения товаров выглядят привлекательно и единообразно, независимо от их исходных размеров.
Фреймворки и библиотеки: Многие CSS-фреймворки (например, Bootstrap, Tailwind CSS) и библиотеки компонентов (например, React, Vue) используют эти свойства для создания адаптивных и гибких компонентов. Например, в компоненте <img> может быть возможность задать object-fit и object-position прямо через пропсы.

Ключевые моменты

object-fit определяет, как изображение или видео масштабируется внутри контейнера.
object-position определяет положение изображения или видео внутри контейнера.
fill, contain, cover, none, scale-down - основные значения object-fit.
Можно использовать ключевые слова (top, bottom, left, right, center) или числовые значения для object-position.
Эти свойства важны для создания адаптивных и визуально привлекательных веб-сайтов.