如何在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文件夹之外).

Answer 1

你可以像这样写:

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

Answer 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">

Answer 3

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

因此，首先要限制 img 标签宽度，您需要将其转换为内联块元素

img.Image{
    display: inline-block;
}