Растягиваются изображения при flex-wrap:wrap. Как это исправить?

При использовании свойства "flex-wrap: wrap" в CSS, элементы внутри flex-контейнера могут быть разделены на несколько строк, если не помещаются в одну существующую строку.

Часто возникает проблема изменения размеров изображений, когда они находятся внутри flex-контейнера с включенным "flex-wrap: wrap". При этом изображения могут быть вытянуты или сжаты, чтобы соответствовать доступному пространству.

Существует несколько способов исправить эту проблему и сохранить пропорции изображений:

1. Использовать контейнер для изображений: оберните каждое изображение в дополнительный контейнер (например, div) и установите ему свойство "flex: 1" или "flex-grow: 1". Затем установите стиль для изображения, чтобы оно занимало всю доступную ширину контейнера. Например:

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
</div>

.image-container {
  flex: 1;
  display: flex;
}

.image-container img {
  width: 100%;
  height: auto;
}

2. Установка максимальной ширины изображения: вы можете задать максимальную ширину для изображений, чтобы они не растягивались за пределы своих пропорций. Например:

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

3. Использование аспектного соотношения CSS: вы можете использовать псевдоэлементы (::before или ::after) для создания прямоугольного блока с заданным аспектным соотношением, а затем поместить изображение внутри этого блока. Например:

<div class="image-container">
  <div class="aspect-ratio"></div>
  <img src="image1.jpg" alt="Image 1">
</div>

.image-container {
  position: relative;
  flex: 1;
}

.aspect-ratio::before {
  content: "";
  display: block;
  padding-top: 75%; /* Примерное аспектное соотношение 4:3 */
}

.aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Эти способы помогут сохранить пропорции изображений при использовании свойства "flex-wrap: wrap". Выберите подходящий вариант в зависимости от своих требований и возможностей.