Растягивание изображения в div с сохранением пропорций CSS

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

Если вам необходимо, чтобы изображение масштабировалось и полностью заполняло элемент div, с сохранением своих пропорций, можно применить CSS-свойство background-size: cover;. Синтаксис выглядит следующим образом:

<div style="background: url('image.jpg') center / cover no-repeat;"></div>

Такой метод позволяет изображению адекватно адаптироваться к размерам div, исключая искажения.

Подробно рассмотрим методы, включая альтернативы

Если вам нужно использовать тег <img> для вставки изображения вместо фона, сочетайте object-fit: cover; с заданием ширины и высоты в 100%. В результате, изображение заполнит контейнер, сохраняя свои пропорции:

<!-- Полноэкранные изображения — это эффектно! -->
<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="image.jpg" style="width: 100%; height: 100%; object-fit: cover;">
</div>

Предотвращение выхода контента за границы

При использовании object-fit некоторые части изображения могут выступать за пределы контейнера. Чтобы избежать появления скроллбаров и сохранить надлежащий вид макета, установите для div свойство overflow: hidden;.

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

Адаптивные изображения и единицы измерения вьюпорта

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

/* Адаптивный div подстроится под любой размер экрана */
.responsive-div {
  width: 100vw;
  height: 50vh;
  overflow: hidden;
}
/* Изображение адаптированно вместится в адаптивный div */
.responsive-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Спрощаем задачу с помощью комплексного свойства background

CSS предлагает упрощённое свойство background, которое позволяет объединить несколько свойств фона. Это удобно, когда вам нужно контролировать размеры прозрачного gif или изображения:

/* Прозрачный gif останется неприметным, а изображение заполнит фон */
.div-with-background {
  background: url('transparent.gif') url('image.jpg') center / cover no-repeat;
}

Ограничиваем размер изображения с помощью свойств max/min

Чтобы изображение не выходило за рамки, но и не было слишком маленьким, используйте свойства max-width, max-height, min-width и min-height. Они помогут ограничить размер изображения, что особенно полезно в динамических макетах:

.controlled-size-img {
  max-width: 100%; /* "Не пройдёте!" – как бы говорит ваш css */
  max-height: 100%; /* Да, это всё ещё актуально */
  min-width: 50%; /* Заполняем, по крайней мере, половину */
  min-height: 50%; /* И по высоте тоже не меньше половины */
  object-fit: cover;
}

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

Представьте себе раму для картины (🖼️), которая должна идеально вместить часть головоломки (🧩):

🖼️: [ Пустая рама ]
🧩: [ Часть изображения ]

Задача: добиться того, чтобы 🧩 ровно уложилась в 🖼️ без деформаций.

.frame {
  display: flex; /* рамка как дом для головоломки */
  justify-content: center; /* центрируем по горизонтали */
  align-items: center; /* и по вертикали */
  overflow: hidden; /* скрываем лишнее */
}

.piece {
  max-width: 100%; /* ширина под контролем */
  max-height: 100%; /* и высота тоже */
  object-fit: contain; /* все пропорции сохранены */
}

И в итоге, часть головоломки (🧩) идеально вписывается в рамку (🖼️), без искажений.

Важность поддержки в различных браузерах

object-fit не поддерживается всеми браузерами, особенно старыми версиями. В таком случае стоит искать альтернативные решения, например, использовать свойство background-size для фоновых изображений.

Заслуживающие внимания альтернативы object-fit

Если object-fit работает нестабильно, можно поместить прозрачный gif в качестве заполнителя внутрь тега img, а истинное изображение задать фоном с применением background-size: cover;:

<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="transparent.gif" style="background: url('image.jpg') center / cover no-repeat; width: 100%; height: 100%;">
</div>

Этот подход сочетает в себе преимущества тега img и управление размером фонового изображения, что позволяет достичь ожидаемого эффекта.

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

1. Идеальное полностраничное фоновое изображение | CSS-Tricks — методы и CSS-код для точного совмещения div и изображения.
2. Адаптивные изображения – Обучение веб-разработке | MDN — руководство по созданию адаптивных изображений от Mozilla.
3. Как создать адаптивные изображения — практическое руководство от W3Schools.
4. Правильные адаптивные изображения: Руководство по <picture> и srcset — подробное изложение современных методик веб-разработки от Smashing Magazine.
5. Создание соотношений сторон для видео – A List Apart — различные подходы к поддержанию пропорций для встроенных медиа.
6. CSS Фоновое изображение – С примерами HTML-кода — подробное руководство от FreeCodeCamp по работе с фоновыми изображениями в CSS.