html - 使图像响应性保持宽高比，并在两侧填充

这里有一个指向工作笔的链接：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;
}

我不希望图像超过它的原始宽度（因此最大宽度），但我希望它缩小到视窗的宽度，同时保持其纵横比。目前，高度与宽度不成比例，这是为什么？

最佳答案

为什么需要display flex to imgWrapper？
将其更改为block，它将按预期工作。如果需要flex，可以将其添加到其他包装器中。

#imgWrapper {
  display: block;
}