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

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

Для идеального растягивания изображения по размерам div, с сохранением пропорций, в CSS следует использовать свойство object-fit: cover;. Задайте ширину и высоту элемента div так, чтобы изображение полностью его заполнило – для этого введите width: 100%; height: 100%;. Вот как выглядит конструкция:

.img-full {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Сохраняем пропорции при растягивании изображения на весь размер div */
}

<div style="width: 200px; height: 200px;">
  <img src="your-image.jpg" class="img-full" alt="">
</div>

Убедитесь в том, что для div заданы размеры.

Подробнее об object-fit

Свойство object-fit предлагает различные способы изменения отображения изображений:

• fill: Заполнение div, без учета пропорций изображения.
• contain: Изображение изменяется по размеру, чтобы уложиться в div, сохраняя пропорции.
• cover: div заполняется изображением, пропорции не нарушаются.
• none: Изображение сохраняет оригинальные размеры и не адаптируется в div.
• scale-down: Применяется наименьшая величина масштаба из вариантов none или contain.

Когда object-fit не подходит

Если ваш браузер не поддерживает object-fit, в качестве решения используйте изображение как фоновое для div с помощью CSS:

.div-background {
  background-image: url('path/to/image.jpg');
  background-size: cover; /* С учетом пропорций изображения */
  background-position: center; /* Центрируем изображение */
}

При этом не забудьте указать правильный URL в свойстве background-image и размеры для div.

Размер имеет значение

Для адаптивных div используйте отзывчивые единицы измерения, например, проценты:

.responsive-div {
  width: 100%; /* Ширина соответствует размеру родительского элемента */
  height: 50vw; /* Высота составляет половину ширины окна просмотра (viewport) */
}

div будет масштабироваться вместе с окном просмотра или родительским элементом, при этом изображение останется без изменений.

jQuery наносит ответный удар

Для динамического масштабирования изображения, содержащегося в div различных размеров или соотношений, можно использовать jQuery:

$(window).load(function() {
  // Ожидаем загрузки изображений.
  $('.image-selector').each(function() {
    var imageAspect = $(this).width() / $(this).height();
    if (imageAspect > 1) {
      // Устанавливаем маркер горизонтальной ориентации.
      $(this).addClass('wide');
    } else {
      // Устанавливаем маркер вертикальной ориентации.
      $(this).addClass('tall');
    }
  });
});

После чего добавим в CSS стили для классов .wide и .tall.

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

Наглядное представление механизма растягивания изображени с сохранением пропорций можно сформировать следующим образом:

Вообразите ситуацию, когда изображение 🖼️ и `div` ⬜ играют в Тетрис:

До начала процесса растягивания:
Изображение 🖼️ готово вставить в `div` ⬜.
**Пропорции исходного изображения сохраняются**. 🔄

После растягивания:
Изображение 🖼️ идеально соответствует форме `div` ⬜.
**Изображение заполняет все пространство** 🌌, пропорции сохраняются. 💠

Процесс аналогичен подбору картины рамки подходящего размера, при этом сама картина не меняет своих форм и размеров.

Сохраняем в границах

Если требуется, чтобы изображение оставалось строго внутри div и не выходило за его пределы, следует использовать max-width: 100% и max-height: 100%:

.img-max {
  max-width: 100%; /* Чтобы предотвратить выход изображения за рамки */
  max-height: 100%; /* Сохраняем размер изображения в пределах `div` */
}

Это позволит изображению подстраиваться под размеры div и не превышать их.

Горизонты object-fit

Если object-fit не справляется с поставленной задачей, возможно использовать трансформации CSS:

.img-transform {
  width: auto;
  height: auto;
  max-width: 100%; /* Ограничиваем ширину */
  max-height: 100%; /* Ограничиваем высоту */
  transform: scale(1.1); /* Немного увеличиваем размер */
}

Величину параметра scale можно настроить для лучшего отображения, но следует быть осторожным при его применении.

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

1. Коробки с контролем соотношения сторон | CSS-Tricks
2. object-fit – CSS | MDN
3. CSS-свойство object-fit – W3Schools
4. Создание интринсических соотношений для видео – A List Apart
5. Адаптивные изображения: руководство по использованию элементов picture и srcset — Smashing Magazine
6. Вопросы на тему 'aspect-ratio' – Stack Overflow
7. Учебник | DigitalOcean

Завершение

Программирование – это искусство, и сейчас вы только что добавили в свою коллекцию проектов еще одно творение. Если информация была для вас полезной и вы создали свое мастерское произведение, поделитесь с нами, отметьте это "лайком". Желаю вам успехов в разработке! 👩‍💻