CSS свойства object-fit и object-position

В этой статье мы поговорим о двух малоизвестных CSS свойствах. Они называются object-fit и object-position и оба имеют отношение к стилизации изображений или видео.

Сложность

Во-первых, мы покажем вам как использовать их, а также пробежимся по всем важным функциям. Мы подготовили для вас небольшое демо-приложение, в котором вы можете поэкспериментировать с данными свойствами и увидеть их в действии. Давайте приступим!

CSS object-fit

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

Обычно для решения данной проблемы создают div и устанавливают свойства background-image и background-size. Современный CSS, позволяет просто добавить тег img, установить источник изображения, а затем применить object-fit непосредственно к селектору изображения.

img {
    width: 100%;
    object-fit: cover;
}

Принимаемые значения:

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

CSS object-position

Это свойство определяет, где внутри контейнера будет располагаться изображение. Свойство принимает два численных значения, первое для вертикальной оси, второе для горизонтальной оси. Эти значения могут быть в процентах, пикселах или других единицах измерения, и могут быть отрицательными. Также можно использовать некоторые ключевые слова, например center, top, right и т.д.

По умолчанию изображение располагается в центре контейнера:

img {
    object-position: center;
    object-position: 50% 50%;
}

Поддержка в браузерах

ДЕМО СКАЧАТЬ

 

Перевод статьи Quick Tip: Get to Know the CSS Object Fit and Position Properties

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.