Сохранение пропорций изображения в HTML: тег IMG и CSS

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

Чтобы сохранить соотношение сторон изображения, укажите лишь ширину или высоту с использованием тега IMG:

<img src="image.jpg" width="300">

Или примените CSS для более гибкого настраивания внешнего вида с помощью object-fit: contain, который обеспечит масштабирование в рамках размеров родительского контейнера, с сохранением исходных пропорций изображения:

<style>
.responsive-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}
</style>
<img src="image.jpg" class="responsive-image">

Стратегии использования CSS

Варианты свойства object-fit

Свойство CSS object-fit дает возможность контролировать, как содержимое заполняет блок. Оно имеет пять вариантов: none, fill, cover, contain, scale-down. При использовании параметра 'cover' блок заполняется полностью за счет кадрирования изображения, в то время как параметр 'contain' помогает сохранить пропорции.

.img-cover {
  object-fit: cover;    /* Изображение полностью покрывает блок, лишние части кадрируются */
}

.img-contain {
  object-fit: contain;  /* Пропорции остаются неизменными, ничего не обрезается */
}

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

Использование max-width и max-height

Свойства max-width и max-height позволяют удерживать размеры изображений в пределах контейнера, адаптируя их под размер экрана.

.limit-img {
  max-width: 64px;    /* Максимальная ширина – 64 пикселя */
  max-height: 64px;    /* Максимальная высота – 64 пикселя */
}

Сохранение пропорций с автоматическими размерами

Если одно из свойств размера не указано, браузер автоматически присвоит его значение auto. Это дает возможность сохранять пропорции изображения.

.auto-dimension-img {
  width: 100%;   /* Ширина – 100% */
  height: auto;  /* Высота автоматическая, с сохранением пропорций */
}

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

Возьмем в качестве примера рамку 🖼️, размер которой меняется, однако пропорции остаются неизменными:

Исходная рамка: 🖼️ Соотношение сторон 4:3

При изменении размера пропорции сохраняются:

🔲 ➡️ 🖼️ ➡️ 🟩
^^Изначальный ^🔄^^Изменённый размер,
квадрат      но пропорции остались 
             прежними

Избегайте визуальных искажений изображения!

Пример использования свойства `object-fit` в HTML:

<img src="image.jpg" style="width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;">

С object-fit:contain; изображение всегда сохранит свои пропорции.

Завершение

Работа с динамическими изображениями

При необходимости динамической загрузки изображений используйте серверный скрипт или JavaScript для изменения атрибута src.

document.getElementById("myDynamicImage").src = getDynamicImagePath();  // Динамическая загрузка пути до изображения

Изображения в блочно-строчных элементах

Размещая изображение внутри блочно-строчного элемента, можно упростить управление разметкой, в особенности при работе с большим количеством элементов.

<div style="display: inline-block;">
  <img src="image.jpg" class="responsive-image">
</div>

Стили для красивого отображения изображений

Добавление рамок и теней с помощью CSS обеспечивает более приятное восприятие изображений.

.pretty-picture {
  border: 1px solid #ddd;        /* Элегантность рамки */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);   /* Глубина за счет тени */
}

Быстрые инлайн-стили

Иногда для единичных стилевых изменений подходит использование инлайн CSS.

<img src="image.jpg" style="width:100%; height:auto; border:1px solid black;">

Принципы адаптивного дизайна

Не забывайте о медиа-запросах для корректного отображения на разных устройствах.

@media (max-width: 768px) {
  .responsive-image {
    width: 50%;    /* Адаптация изображений под малые экраны */
    height: auto;
  }
}

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

1. Aspect Ratio Boxes | CSS-Tricks — детальное руководство по сохранению пропорций.
2. aspect-ratio – CSS | MDN — документация MDN о медиа-функции aspect-ratio.
3. Aspect Ratio / Equal Height to Width | W3Schools — урок по созданию адаптивных изображений с сохранением пропорций.
4. Maintain the aspect ratio of a div with CSS | Stack Overflow — обсуждения на Stack Overflow о соотношении сторон элемента.
5. Creating Intrinsic Ratios for Video – A List Apart — статья о соотношении сторон для видео.
6. Responsive Images Done Right: A Guide To And srcset — Smashing Magazine — технические приемы и примеры работы с адаптивными изображениями.
7. High-Performance CSS Animations | web.dev — секреты создания высокопроизводительных анимаций с учетом соотношения сторон.