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

在我的网站上，我想在特定尺寸（ 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 ，但不起作用。该图像是从一个servletstream（它存储在Tomcat的webapps文件夹外）。

你可以这样写：

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

看我的例子： jsfiddle 。一切正在工作。如果图像大于600像素，那么resize。

您在HTML中的类ImageContainer的名称中犯了一个错误。

给你的容器宽度600px。

如果你只想要更大的图像，以适应里面，添加：CSS：

 #ImageContainer img { max-width: 600px; }

如果你想所有的图像采取可用（600像素）的空间：

 #ImageContainer img { width: 600px; }

尝试这个

  div#ImageContainer { width: 600px; } #ImageContainer img{ max-width: 600px}

问题是， img标签是内联元素，你不能限制内联元素的宽度。

因此，要首先限制img标签宽度，您需要将其转换为内嵌块元素

 img.Image{ display: inline-block; }

你的CSS几乎是正确的。你只是缺lessdisplay: block; 在图像的CSS。还有一个在你的ID错字。它应该是<div id="ImageContainer">

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

 <div id="ImageContainer"> <img src="http://placehold.it/1000x600" class="Image"> </div>