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

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

Если вы хотите сохранить пропорции изображения, установите значение width равное 100%, а значение height укажите как auto в CSS. Примените также object-fit: contain;. Использование этих свойств позволит изображению заполнить размеры контейнера без искажений:

img {
  width: 100%; /* Гибкость – наше всё */
  height: auto; /* Доверьтесь автоматике */
  object-fit: contain; /* Исключаем искажения пропорций */
}

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

Восхваление классов масштабирования и ограничение размеров

Для управления масштабированием вы можете создать класс в CSS, например .img.resize, который поможет сохранить исходные пропорции изображения:

.img.resize {
  max-width: 100%; /* Максимальная ширина – 100% */
  max-height: 500px; /* Максимальная высота – 500px */
  height: auto; /* Высота автоматическая */
}

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

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

Для фоновых изображений используйте background-size: contain;, чтобы масштабировать картинку так, чтобы она полностью помещалась в контейнер, сохраняя при этом свои пропорции:

div.background {
  background-image: url('image.jpg');
  background-size: contain; /* Полное заполнение контейнера */
  background-repeat: no-repeat; /* Убираем повторение */
}

Изменение размеров с помощью transform

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

img.half-scale {
  transform: scale(0.5); /* Уменьшаем до 50% */
  -webkit-transform: scale(0.5); /* Для браузера Webkit */
  -ms-transform: scale(0.5); /* Для Internet Explorer */
}

Используйте классы масштабирования, чтобы сохранить чистоту и улучшить возможности повторного использования HTML-кода.

Свойство object-fit на страже пропорций

Свойство object-fit определяет, как изображение будет масштабироваться внутри своего контейнера. Если заданы object-fit: contain; и параметры width и height, изображение всегда будет полностью вмещаться в контейнер и сохранять свои пропорции:

div.my-image {
  width: 100%; /* Ширина 100% */
  height: 500px; /* Высота 500px */
  object-fit: contain; /* Изображение полностью в контейнере, без искажений */
}

Внимание к адаптивному дизайну

Не забывайте об адаптивности изображений, подгоняя их размеры под разные разрешения экранов и типы устройств. Это сделает интерфейс удобным для всех пользователей.

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

Представим, что мы подбираем коробку под воздушный шар (🎈). Вот так будет выглядеть пример сохранения пропорций изображения с помощью CSS:

Сохранение пропорций 🎈 -> 📦
Используем:           `max-width: 100%;`
                      `height: auto;`
                      
Результат:            📦       📦       📦
До масштабирования:   🎈       🎈       🎈
После масштабирования:🎈       🎈       🎈

Растягивание изображения 🎈 -> 📦
Используем:           `width: 100%;`
                      `height: 100%;`

Результат:            📦       📦       📦
До масштабирования:   🎈       🎈       🎈
После масштабирования:🎦       🎦       🎦
// Примечание: 🎦 означает шар, изменивший свои пропорции, чтобы поместиться в коробку

Для сохранения пропорций (📏) шар должен оставаться круглым.

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

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