这是工作笔的链接：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;
}
我不希望图像超过其原始宽度（因此为最大宽度），但我希望将其缩小到视口的宽度，同时保持其宽高比。当前，高度与宽度不成比例，为什么？
为什么需要对imgWrapper使用display flex？将其更改为阻止，它将按预期工作。如果您需要在那里的flex，请将其添加到其他包装中。
#imgWrapper {
display: block;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句