Масштабирование изображения в CSS: сохраним пропорции

Быстрый ответ

Для идеального расположения изображения в контейнере используйте CSS-свойства max-width и max-height, установив их значения в 100%, и дополните их свойством object-fit: contain. Пример кода:

<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="image.jpg" style="max-width: 100%; max-height: 100%; object-fit: contain;" alt="">
</div>

Этот подход сохранит пропорции, не позволяя изображению выходить за границы контейнера.

Подробное исследование

Использование object-fit и object-position

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

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

В свою очередь, object-fit: scale-down уменьшит изображение, оставляя маленькие картинки в их исходном размере.

Подробнее об этом расскажет наш спикер на видео

Масштабирование фоновых изображений

Пример использования изображения в качестве фона:

.bg-container {
  background-image: url('image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

background-size: contain позволит изображению уместиться в пределах контейнера, background-repeat: no-repeat запретит его повторение, а background-position: center выровняет изображение по центру.

Проверка совместимости с браузерами

Обязательно проверьте совместимость свойства object-fit с браузерами, которые используют ваши пользователи. Для Internet Explorer рассмотрите возможность применения альтернативных решений, использующих transform.

Адаптивные макеты

Не забывайте учитывать адаптивность и соотношение сторон изображений, особенно работая с различными устройствами и браузерами.

Интерактивные эксперименты

Попрактиковаться в работе с CSS и изображениями можно на таких ресурсах, как W3Schools.

Визуализация

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

Границы div: [ Соотношение сторон 16:9 ]
Изображение для вставки: [ Любого размера ]

Использование свойства object-fit имеет вид:

img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

Благодаря этому изображение идеально впишется в контейнер:

До: 🖼️💔🖼️ (размер не подходит)
После: 🖼️💙🖼️ (идеально вписывается)

Полезные материалы

• Aspect Ratio Boxes | CSS-Tricks — обеспечение сохранения пропорций изображений.
• object-fit | MDN — подробное описание свойства object-fit.
• A Complete Guide to Flexbox | CSS-Tricks — создание гибких макетов с помощью Flexbox.
• How To Create Responsive Images – W3Schools — как создать адаптивные изображения.
• Responsive images – MDN — о создании адаптивных изображений с использованием srcset и sizes.