CSS图像最大宽度设置为原始图像大小？

Question

你能做到吗？我让用户将图像上传到宽度为 100% 的容器中，但我不希望图像大于其原始大小。非常感谢!

Answer 1

只是不设置图片的width，只设置max-width。

img {max-width:100%; height:auto}

(height:auto 并不是必需的，因为 auto 是默认设置，但我把它放在那里是为了提醒自己我希望图像具有它的自然比例。)

此代码段有两个框，一个比图像小，一个比图像大。如您所见，较小框中的图像按比例缩小，而较大框中的图像具有正常大小。

div {border:2px outset green; margin:6px 0}
.box1 {width:100px; height:70px;}
.box2 {width:200px; height:100px;}
img {max-width:100%; height:auto}

<div class="box1">
    <img src="/image/FuQYf.png" alt="" />
</div>
<div class="box2">
    <img src="/image/FuQYf.png" alt="" />
</div>