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

【问题标题】：How to set max width of an image in CSS如何在 CSS 中设置图像的最大宽度
【发布时间】：2012-06-20 04:34:24
【问题描述】：

在我的网站上，我想在具有特定尺寸 (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 文件夹之外）。

【问题讨论】：

如果你想让它自动缩小，只需设置max-width，不要设置max-height，它应该可以工作。如果没有，请发布您的代码，以便其他人可以帮助您发现问题。
我刚试过你的例子，它在这里工作。您确定您的实际 html（“ImageContainerr”）中没有与本示例中相同的错字吗？
该死，你是对的。我重新启动了我的 Tomcat 和浏览器，又试了一次——它真的很好用。无论如何谢谢 :) 错字不是这种情况 - 我在这里更改了 id 和类名，这样更容易理解。
据此，我假设您不使用 Firebug 或其他开发人员工具。我建议你让自己使用 Firebug 并学习使用它。（通过检查这两个元素，您会发现宽度没有添加到容器中。）
警告：这个问题的适用范围远不如最初出现的那么广泛。看起来很多赞成票可能是因为那些赞成票的人也错过了这里的 id 与 CSS 不匹配。正如所写的 (20151201)，这个问题归结为“与任何 DOM 对象不匹配的 CSS 选择器不会影响外观”。 ;^) （不知道是否最好编辑问题以询问其标题所暗示的含义......）

【解决方案1】：

你可以这样写：

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

【讨论】：

【解决方案2】：

我看到这还没有作为最终答案。

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

【讨论】：

【解决方案3】：

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

所以要限制img标签的宽度首先你需要将它转换成一个内联块元素

img.Image{
    display: inline-block;
}

【讨论】：

【解决方案4】：

鉴于您的容器宽度为 600 像素。

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

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

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

#ImageContainer img {
    width: 600px;
}

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：

【解决方案6】：

您的 css 几乎是正确的。您只是在图像 css 中缺少 display: block;。你的身份证上还有一个错字。应该是<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>

【讨论】：

【解决方案7】：

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

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

【讨论】：