object-fit

Свойство, которое позволяет управлять тем, как картинка <img> или видео <video> будет подстраиваться под заданные размеры.

По своему поведению очень похоже на свойство background-size для фоновых изображений.

Представим, что у нас есть картинка размером 500 на 150 пикселей:

        
          
          <img  class="image"  src="images/landscape.jpg"  alt="Картинка из примера про object-fit">
          <img
  class="image"
  src="images/landscape.jpg"
  alt="Картинка из примера про object-fit"
>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

По дизайну картинка должна занимать 250 на 250 пикселей. Если мы просто зададим эти размеры, то картинка сильно деформируется.

        
          
          .parent {  width: 250px;  height: 250px;  border: 1px solid #FFFFFF; /* Для наглядности */}
          .parent {
  width: 250px;
  height: 250px;
  border: 1px solid #FFFFFF; /* Для наглядности */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
          
          .image {  object-fit: cover;}
          .image {
  object-fit: cover;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Картинка не деформировалась, подстроилась под нужные размеры. Другой вопрос, что на ней теперь почти ничего не видно 😅, но это мелочи.

Свойство задаётся для самого тега <img>, не для родителя. Пишем свойство, а в качестве значения задаём одно из ключевых слов. В отличие от background-size мы не можем задать конкретные размеры в качестве значения 🤔

Доступные значения:

• fill — значение по умолчанию, картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям.
• contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций.
• cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное.
• none — картинка отображается без изменения пропорций или размеров.
• scale-down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом. Сложно объяснить, посмотрите демку 🥴

Советую поизменять размер окна браузера чтобы наглядно увидеть как картинки подстраиваются (или нет) под заданные размеры.

Дословно свойство переводится как «объект подходит», что вполне точно отражает принцип его работы. Свойство управляет тем, как подгружаемая картинка будет вписываться в рамки заданных размеров.

💡 Задавайте свойство самой картинке <img>, не родительскому контейнеру.

💡 Работает только если картинке задан хотя бы один размер: ширина или высота. Иначе браузер не понимает в какую область нужно вписать картинку.

💡 Свойство и его значение не наследуется. Хотя я бы посмотрела на то, как вы вложите что-нибудь внутрь картинки 0_о

💡 Не анимируется 😒

💡 Классно работает в сочетании со свойством object-position.

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Самое полезное из всех доступных значений, на мой взгляд, значение cover. Оно позволяет имитировать поведение фонового изображения для элементов <img> или <video>. В последнем случае это особенно актуально потому что нет других способов красиво адаптировать видео под любой размер экрана без нарушения пропорций по дороге.