Как сделать картинку в flexbox сжимаемой с соблюдением пропорций по ширине и высоте?

Для создания сжимаемой картинки с соблюдением пропорций по ширине и высоте в flexbox, можно использовать свойство flex и свойство max-width. Вот пример решения:

<div class="flex-container">
  <img src="your-image.jpg" alt="Your Image" class="flexible-image">
</div>

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

.flexible-image {
  flex: 1; /* Распределяем доступное пространство */
  max-width: 100%; /* Ограничиваем ширину картинки до 100% родительского контейнера */
  height: auto; /* Автоматически рассчитываем высоту картинки, соблюдая пропорции */
}

В данном примере мы используем flex-container для создания flexbox контейнера, который будет центрировать содержимое по горизонтали и вертикали. Картинка находится внутри flexbox контейнера с классом flexible-image.

В CSS-правилах для .flexible-image мы задаем flex: 1, чтобы сделать картинку расширяемой и заполняющей доступное пространство. Затем мы устанавливаем max-width: 100%, чтобы ограничить ширину картинки до 100% ширины родительского контейнера. При этом высота картинки автоматически рассчитывается соблюдая пропорции изображения, благодаря свойству height: auto.

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