如何在 CSS 中设置图像的最大宽度
在我的网站上，我想在具有特定尺寸 (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，它应该可以工作。如果没有，请发布您的代码，以便其他人可以帮助您发现问题。
id 没有匹配 CSS。正如所写的 (20151201)，这个问题归结为“与任何 DOM 对象不匹配的 CSS 选择器不会影响外观”。 ;^)（不知道是否最好编辑问题以询问其标题所暗示的含义......）
你可以这样写：
img{
width:100%;
max-width:600px;
}
我看到这还没有作为最终答案。
我看到您的最大宽度为 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">
问题是 img 标签是内联元素，你不能限制内联元素的宽度。
因此，要首先限制 img 标签宽度，您需要将其转换为 inline-block 元素
img.Image{
display: inline-block;
}
给定您的容器宽度 600px。
如果您只想要更大的图像以适合内部，请添加：CSS：
#ImageContainer img {
max-width: 600px;
}
如果您希望所有图像占用可用（600 像素）空间：
#ImageContainer img {
width: 600px;
}
尝试这个
div#ImageContainer { width: 600px; }
#ImageContainer img{ max-width: 600px}
你的CSS几乎是正确的。您只是在图像 css 中缺少 display: block;。你的身份证上还有一个错字。它应该是 <div id="ImageContainer">
img.Image { 最大宽度：100%;显示：块； } div#ImageContainer { 宽度：600px; }
将元素包装在具有固定宽度/高度的 div 中：
<div style="width: 600px;">
<img src="whatever" />
</div>
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。