html - 如何在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 文件夹之外)。

Answer 1

你可以这样写:

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

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