在我的网站上,我想显示用户上传的图像在一个新的窗口与特定的大小(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文件夹之外)。
发布于 2012-06-18 16:09:08
发布于 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">
发布于 2017-01-24 00:32:37
问题是img标记是内联元素,您不能限制内联元素的宽度。
因此,要限制img标记的宽度,首先需要将其转换为内联块元素
img.Image{
display: inline-block;
}
https://stackoverflow.com/questions/11078913
复制相似问题