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

Question

我想在我的网站上展示用户上传的图片，并在一个特定尺寸(宽度: 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

---

如果你想让它自动缩放，请设置“max-width”，不要设置“max-height”，然后它应该可以工作。如果还是不行，就把你的代码发出来，让别人帮你找到问题所在。 - Ray Cheng

我刚刚尝试了你的示例，它在这里可以工作。你确定你的实际HTML中没有与此示例中相同的拼写错误（"ImageContainerr"）吗？ - Mr Lister

真的，你说得对。我重新启动了Tomcat和浏览器，再试了一遍——它确实很好地工作了。无论如何，还是谢谢你 :) 打错字并不是问题所在——我在这里改变了id和class名称，以便更容易理解。 - user1315305

从这句话中我可以推断出你没有使用Firebug或其他开发者工具。我建议你下载并学会使用Firebug。（通过检查这两个元素，你就会发现宽度没有被添加到容器中。） - Joonas

警告：这个问题的适用范围比起初看来要小得多。看起来很多赞可能是因为那些点赞者也错过了这里的 id 不匹配 CSS 的情况。按照目前（20151201）的描述，这个问题可以简化为，“不匹配任何 DOM 对象的 CSS 选择器不会影响外观”。;^)（我无法确定是否将编辑问题以询问其标题是否含有某种含义更好...） - ruffin

Answer 1

你可以这样写：

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

请查看此链接

- sandeep

---

非常感谢！那个完美地运作了！ 编辑：好吧，不完全是 - 它还会调整小于600像素的图像大小 - 这是我不想要的。 - user1315305

我投了反对票。发帖者想要的不是你提供的东西。你应该意识到OP的代码可能存在问题，因为通常他尝试的方法应该是有效的。无论谁给了我赞同票，请给我一个理由，谢谢。 - Joonas

@Lollero先生在我的回答之后编辑了他的问题，您能解释一下我的答案有什么问题吗？谢谢。 - sandeep

在IE中，这不会保持纵横比。 - Cocowalla

“width:100%” 的目的是什么？链接的 fiddle 在没有它的情况下似乎也能正常工作？（在 Mac OX 上的 Firefox 和 Safari 中进行了测试） - Jon Schneider

Answer 2

我看到这个问题还没有最终的答案。

我看到你的max-width是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">

- Merle_the_Pearl

Answer 3

问题在于标签是内联元素，无法限制内联元素的宽度。因此，要限制标签的宽度，首先需要将其转换为内联块级元素。

img.Image{
    display: inline-block;
}

- Kamlesh Uikey

---

根据我的经验，这并不是必要的。max-width单独使用对我来说已经足够了。尽管不限制内联元素的宽度的逻辑似乎是合理的。 - David Pierson

根据我的经验，这并不是必要的。max-width 对我来说就够了。尽管不限制内联元素的宽度的逻辑似乎是合理的。 - undefined

Answer 4

假设你的容器宽度为600像素。

如果你希望只有比这更大的图片适合其中，可以添加以下CSS：

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

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

#ImageContainer img {
    width: 600px;
}

- Leo Armentano

---

此外，对于原帖的评论表明您在CSS文件中使用了错误的ID：div#ImageContainer与<div id="ImageContainerr">不同。 - Leo Armentano

Answer 5

试试这个

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

- Krish

---

这不正确。你的选择器意味着“一个图像元素内部的img元素”。 - Mr Lister

Answer 6

你的CSS几乎正确，只是在图像CSS中缺少display:block;。此外，你的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>

- Rhythm Ruparelia

Answer 7

将元素包装在一个具有固定宽度/高度的 div 中：

<div style="width: 600px;">
  <img src="whatever" />
</div>

- jstaab