动态缩小图像尺寸

Question

所以我得到了一张3000x2000的大图像，我希望在我的网站上覆盖它，所以它填充100％的宽度，但保持相同的比例，但如果我缩小屏幕，图像会自动调整大小相同的比例，没有溢出滚动。

<div class="row anfield">
    <img src="../Images/Anfield.jpg" />
</div>

.row{
width:100%;
display:flex;
flex-wrap:wrap
}

我在css anfield中尝试过最大宽度/宽度100％，但都没有效果。

<img style="max-width:100%" src="../Images/Anfield.jpg" />

这会将宽度更改为100％，但不会相应调整高度。

编辑：我尝试添加此内容。根本没有调整高度

CSS

.fixed-ratio-resize { /* basic responsive img */
max-width: 20%;
height: auto;
width: auto\9; /* IE8 */
}

HTML

<img id="anfield" src="../Images/Anfield.jpg" class="fixed-ratio-resize" />

Answer 1

查看此网站。它允许您上传图像，不仅生成较小的图像，还生成代码！ http://www.responsivebreakpoints.com/

Answer 2

您不需要使用flexbox，只需将width: 100%应用于图像（没有别的），默认情况下高度为自动，这使其保持成比例。