使图像响应保持纵横比，两侧填充

Question

这里是link工作笔：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;
}

使图像响应保持纵横比，两侧填充

Make image responsive maintaining aspect ratio, with padding either side

html

css

responsive-design

responsive-images