CSS Flex Box: Сохранение пропорций изображений при изменении высоты

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

Для сохранения пропорций изображения задайте в CSS определенное значение для высоты и указывайте для ширины значение auto. Таким образом, высота становится фиксированной, а ширина автоматически подстраивается.

img {
  height: 200px;  /* Фиксированная высота */
  width: auto;    /* Автоматическая ширина */
}

Применение object-fit для сохранения формы изображения

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

img {
  object-fit: contain;
  height: 200px;  /* Устанавливаемая высота */
}

Взаимодействие с flexbox

Гибкое управление пропорциями

Для поддержания пропорций изображения используйте свойства flex совместнo с object-fit:

.flex-item {
  flex: 0 0 auto;       /* Элемент flex не меняет свои размеры */
  min-width: 0;         /* Уменьшение размера flex-элемента до минимального */
  align-self: center;   /* Выравнивание элемента по центру */
}

.flex-item img {
  width: 100%;          /* Заполнение ширины flex-элемента */
  height: auto;         /* Автоматическая высота для сохранения пропорций */
  object-fit: contain;  /* Режим contain для корректного отображения */
}

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

Эффективная обработка изображений

Поместив изображения внутри элементов div или span, вы получите больше контроля над их отображением в контейнере flex:

.flex-container div {
  flex: 0 0 auto;
  margin: 0;                /* Обнуление отступов */
  padding: 0;               /* Обнуление внутренних полей */
  display: block;           /* Установка блочного типа отображения */
}

.flex-container div img {
  max-width: 100%;          /* Максимальное использование доступного пространства */
  height: auto;             /* Автоматическое подстраивание высоты */
}

Учтите возможности браузеров

Учет специфичных особенностей различных браузеров

Специфические баги браузеров всегда присутствуют. Особое внимание стоит уделить багу под названием "подразумеваемый минимальный размер flex-элементов", который может вызвать недоумение. База знаний Сети разработчиков Mozilla – это настоящая энциклопедия ошибок и путей их решения.

Проверка работы на разных браузерах

Убедитесь, что изображения отображаются корректно в каждом из браузеров:

- Chrome: Обратите внимание на ошибку **Flexbox Intrinsic Sizing**.
- Firefox: Проверьте функционирование свойства минимального размера элементов flex.
- Safari: Проведите тестирование поддержки `object-fit` и свойств flex.

Ссылка на практический пример: http://jsfiddle.net/ykw3sfjd/

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

Представим пропорции изображения как способность жонглера удержать равновесие на моноколесе:

Баланс 🤹‍♂️: Пропорции изображения
Моноколесо : Ширина ↔️ Высота

Изменение высоты (↕️) при сохранении ширины (↔️) в состоянии равновесия:

До: 🖼️ = [16:9]
Регулировка: 🛠️ Высота ↕️ (Баланс)
После: 🖼️ = [🤹‍♂️]

Как жонглер на моноколесе, изображение сохраняет свои пропорции в процессе изменения высоты.

Набор спасательных инструментов CSS для сохранения пропорций

Даем display: table; возможность себя проявить

Когда flexbox работает не предсказуем, свойство display: table; может стать простым способом сохранения пропорций:

.image-wrapper {
  display: table;
}

.image-content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;   /* Обеспечение вертикального выравнивания */
}

.image-content img {
  height: 200px;         /* Задаем фиксированную высоту */
  width: auto;           /* Ширина подстраивается автоматически */
}

Проверьте производительность вашей веб-страницы

Не забывайте отслеживать веб-производительность. Чрезмерное использование ресурсоемких свойств может негативно отразиться на впечатлении пользователей. Инструмент Google Lighthouse поможет обнаружить проблемы с производительностью.

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

1. Aspect Ratio Boxes | CSS-Tricks – CSS-Tricks — подробный учебник по работе с пропорциями изображений и магией CSS.
2. aspect-ratio – CSS: Cascading Style Sheets | MDN — информацию о aspect-ratio можно найти в официальной документации MDN.
3. Responsive images – Learn web development | MDN — освоение использования элементов <img> и srcset для создания адаптивных изображений.
4. aspect ratios in responsive web design — подробное руководство по расчету пропорций изображений в адаптивном дизайне.
5. A Complete Guide to CSS Grid | CSS-Tricks – CSS-Tricks — всестороннее руководство по использованию CSS Grid для создания сложных и отзывчивых макетов.