如何在CSS中设置图像的最大宽度

Question

在我的网站上，我想在新窗口中显示用户上传的特定大小的图像（ width: 600px ）。问题是图像可能很大。因此，如果它们大于这些 600px ，我想调整它们的大小，同时保持纵横比。

我尝试了 max-width CSS 属性，但它不起作用：图像的大小没有改变。

有什么办法可以解决这个问题吗？

HTML :

 <div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS ：

 img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

我还尝试为图像设置 max-width: 600px ，但不起作用。该图像是从 servlet 流式传输的（它存储在 Tomcat 的 webapps 文件夹之外）。

原文由 user1315305 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以这样写：

 img{
    width:100%;
    max-width:600px;
}

检查这个 http://jsfiddle.net/ErNeT/

原文由 sandeep 发布，翻译遵循 CC BY-SA 3.0 许可协议