Привязка размера изображения к высоте родительского div в CSS

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

Для адаптации размера изображения к высоте родительского элемента в CSS используется свойство height с процентными значениями. Такое изображение будет изменять свои размеры в соответствии с высотой контейнера-родителя.

.parent {
  height: 300px; 
}

.child img {
  height: 50%; 
}

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

Сохраняем пропорции: подчеркиваем уникальность

Чтобы изображение не искажало свои пропорции, используется свойство object-fit. Оно позволяет изображению заполнять выделенное пространство внутри родительского элемента без возникновения искажений.

.parent img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

Время переполнения: скрываем лишнее

Если изображение должно полностью заполнять родительский блок и не выходить за его границы, в таком случае свойство overflow: hidden эффективно скроет все, что выходит за пределы контейнера.

.parent {
  overflow: hidden; 
}

Flexbox: напрягаем мощь CSS

Flexbox предоставляет удобные инструменты для создания макетов, где размер изображения будет автоматически подстраиваться с помощью свойств flexbox-раскладки.

.flexbox-container {
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.flexbox-container img {
 max-width: 100%; 
 max-height: 100%; 
}

Изображение, благодаря возможностям flexbox, будет изменять свои размеры, соблюдая пропорции и динамично адаптироваться к размерам родительского элемента.

Абсолютное позиционирование: заняли позицию

Абсолютное позиционирование в сочетании с трансформацией CSS позволяет центрировать изображение внутри родительского блока с фиксированными размерами.

.parent-div {
  position: relative; 
  height: 300px; 
}

.child-image {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  max-height: 100%; 
}

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

Слишком длинно, говорите? Не вопрос!

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

.child img {
  height: auto;
  max-height: 100%; 
  width: auto;
}

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

Рассмотрим, как меняется размер изображения в зависимости от размеров контейнера-родителя:

| Родительская рама (🖼️) | Дочерний рисунок (🖼️) |
| ----------------------- | ----------------------- |
| Фиксированная высота    | Высота: 100% от 🖼️     |

Изменения размеров дочернего рисунка в контексте родительской рамы:

До: 🖼️[          ] 
    🖼️[🖼️🖼️]  
После: 🖼️[             ] 
       🖼️[🖼️🖼️🖼️]

CSS-код, меняющий размер изображения для вписывания его в раму:

.child-image {
  height: 100%; 
}

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

Единицы просмотра: живописный маршрут

Единицы измерения vh в CSS позволяют задавать размеры элементов относительно высоты окна браузера, что является важным инструментом создания адаптивного дизайна.

.image {
  height: 50vh; 
}

CSS Grid: создаем сетку для нашего рисунка

CSS Grid предоставляет широкие возможности для управления строками и столбцами при работе с изображениями.

.grid-container {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
}

.grid-item img {
  width: 100%; 
  height: auto;
}

CSS Grid обеспечивает строгую структуру расположения элементов, превращая изображения в упорядоченные части макета.

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

1. Полное руководство по Flexbox | CSS-Tricks – глубокое знакомство с использованием Flexbox для создания гибких макетов.
2. object-fit – CSS: Каскадные таблицы стилей | MDN – изучение методов контроля масштабирования изображений без изменения пропорций.
3. Коробки с аспектными соотношениями | CSS-Tricks – о практиках поддержания пропорций изображений в адаптивном дизайне.
4. Правильные изображения для адаптивности: Руководство по <picture> и srcset | Smashing Magazine – об использовании техник адаптивных изображений для оптимального отображения в различных условиях.
5. Полное руководство по CSS Grid | CSS-Tricks – ознакомьтесь с основами CSS Grid для создания сложных сетчатых макетов.
6. Единицы CSS Viewport: vh, vw, vmin, и vmax | SitePoint – использование единиц просмотра для создания макетов, которые идеально масштабируются для любого устройства.