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

Posted 2023-03-05

【中文标题】如何在 CSS 中设置图像的最大宽度

【英文标题】：How to set max width of an image in 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;

查看http://jsfiddle.net/ErNeT/

【讨论】：

非常感谢！这完美！编辑：嗯，不是很精确 - 它还会调整小于 600 像素的图像的大小 - 这是我不想要的。

我投了反对票。 OP想要的不是你提供的。您还应该意识到 OP 的代码中可能存在问题，因为通常他尝试过的应该可以工作。曾经投票过的人，给我一个理由，谢谢。

@Lollero first OP 在我回答后编辑他的问题 & 你能解释一下我的回答有什么问题吗？谢谢

这不会在 IE 中保留纵横比

“width:100%”的目的是什么？没有它，链接的小提琴似乎可以正常工作？ （在 Mac OX 上的 Firefox 和 Safari 中测试）

【参考方案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;

【讨论】：

另外，OP 上的 cmets 表明您在 CSS 文件中使用了错误的 id：div#ImageContainer 与 不同

【参考方案5】：

试试这个

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

【讨论】：

这是不正确的。您的选择器表示“图像元素内的 img 元素”。

【参考方案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>