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

Question

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

score 152 · Accepted Answer

你可以这样写：

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

score 17 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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

img.Image{
    display: inline-block;
}

score 3 · Accepted Answer

给定您的容器宽度 600px。

如果您只想要更大的图像以适合内部，请添加：CSS：

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

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

#ImageContainer img {
    width: 600px;
}

score 1 · Accepted Answer

1

尝试这个

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

于 2012-06-18T08:11:23.033 回答

score 0 · Accepted Answer

你的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>

score 0 · Accepted Answer

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

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

7 回答 7