如何在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/

Answer 2

鉴于您的容器宽度为600px。

如果您只想要比图片更大的图像，请添加： CSS：

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

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

#ImageContainer img {
    width: 600px;
}

Answer 3

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

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

img.Image{
    display: inline-block;
}

Answer 4

试试这个

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

Answer 5

你的CSS几乎是正确的。您只是在图片css中缺少display: block;。 你的身份也是一个错字。它应该是<div id="ImageContainer">

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

我认为这还没有得到最终的答案。

我看到您的最大宽度为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">