使圖像響應保持縱橫比，兩邊都有填充

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;
}

我不希望圖像超過其原始寬度（因此最大寬度），但我希望它縮小到視口的寬度，同時保持其縱橫比。 目前，高度不與寬度成比例，這是為什么？

Answer 1

為什么你需要顯示 flex 到 imgWrapper？ 將其更改為阻止，它將按預期工作。 如果您需要 flex 在那里將它添加到其他包裝器。

#imgWrapper {
  display: block;
}

Answer 2

將vm單元用於您的#imgWrapper使其始終響應如何：

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