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

在我的网站上，我想在新窗口中显示用户上传的具有特定大小（width: 600px）的图像。问题在于图像可能很大。因此，如果它们大于这些600px尺寸，我想调整它们的尺寸，并保留宽高比。

我尝试了max-widthCSS属性，但是它不起作用：图像的大小不变。

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

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文件夹外部）。

您可以这样写：

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

检查此http://jsfiddle.net/ErNeT/

我看到这还没有最终解决。

我看到您的最大宽度为100％，宽度为600。翻转它们。

一个简单的方法也是：

     <img src="image.png" style="max-width:600px;width:100%">

我经常使用它，然后您也可以控制单个图像，而不必在所有img标签上使用它。您也可以像下面这样使用CSS。

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">

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

所以首先要限制img标签的宽度，您需要将其转换为inline-block元素

img.Image{
    display: inline-block;
}

给定您的容器宽度600px。

如果您只想容纳比其大的图像，请添加：CSS：

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

如果您希望所有图像都占用可用的（600px）空间：

#ImageContainer img {
    width: 600px;
}

试试这个

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

您的CSS几乎是正确的。您只是display: block;在图像CSS中丢失了。您的身份证上也有错字。它应该是<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>