如何在CSS中设置图像的最大宽度
如何在CSS中设置图像的最大宽度
提问于 2012-06-18 15:58:43
在我的网站上，我想显示用户上传的图像在一个新的窗口与特定的大小(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文件夹之外)。
回答 7
Stack Overflow用户
发布于 2012-06-18 16:09:08
Stack Overflow用户
发布于 2019-07-17 00:38:49
我看这还不是最终的答案。
我看到你的最大宽度是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">Stack Overflow用户
发布于 2017-01-24 00:32:37
问题是img标记是内联元素，您不能限制内联元素的宽度。
因此，要限制img标记的宽度，首先需要将其转换为内联块元素
img.Image{
display: inline-block;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11078913
复制相关文章
相似问题
腾讯云开发者
