Сделайте изображение отзывчивым, сохраняя пропорции, с отступом по обе стороны

Question

Вот ссылка на рабочий перо: https://codepen.io/Adam0410/pen/OBqRRN

HTML

<div id="imgWrapper">
  <img src="https://thestoryengine.co/wp-content/uploads/2017/11/The-crossroads-Section-images-02.png">
</div>

CSS

#imgWrapper {
  display: flex;
  justify-content: center;

  width: 100%;

  padding: 0 20px;
}

#imgWrapper img {
  width: 100%;
  max-width: 1660px;
  height: auto;
}

Я не хочу, чтобы изображение превышало его исходную ширину (следовательно, max-width), но я хочу, чтобы оно уменьшалось до ширины области просмотра, сохраняя при этом его соотношение сторон. В настоящее время высота не масштабируется с шириной, почему это так?

Answer 1

Как насчет использования устройства vm для #imgWrapper, что делает его всегда отзывчивым:

#imgWrapper {
 display: flex;
 justyfy-content: center;
 vm: 100%;
 padding: 0 20px;
}

Answer 2

Зачем вам нужен flex для отображения в imgWrapper? Замените его на блокировку, и он будет работать как положено. Если вам нужен flex, добавьте его в другую оболочку.

#imgWrapper {
  display: block;
}