css - 调整图像大小而不扭曲它

Question

目前我正在用下面的代码做一个非常简单的方法。

<div style="width: 100%;">
    <img width="100%" height="250" src="http://i.imgur.com/lNB7QSt.jpg">
</div>

如果我删除代码的 height="250" 部分，它会将图像打印为正常质量 + 正常大小，因为我希望它的高度限制为 250 并返回类似这张图片。

但它返回的内容类似于下面显示的内容。

Answer 1

您应该做的只是像这样对 CSS 宽度属性使用“auto”:

<img style="width:auto; height:250px" src="http://i.imgur.com/lNB7QSt.jpg">

这应该符合您的预期。