CSS 缩小图像以适应包含的 div，而不指定原始大小

我想要一个网站，我可以在其中上传不同大小的图像以显示在 jquery 滑块中。我似乎无法将图像放入包含的 div 中（按比例缩小）。这就是我打算这样做的方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper">

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>
</body>
</html>

和CSS

 #wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

我试图在 CSS 中将图像的最大宽度设置为 100%。但这是行不通的。

原文由 Muteking 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 311

这是我知道的一个老问题，但它在几个相关的谷歌搜索中排在前五位。这是没有将图像更改为背景图像的纯 CSS 解决方案：

 width: auto;
height: auto;
max-width: MaxSize;
max-height: MaxSize;

“MaxSize”是您要使用的任何内容的占位符 max-width 和 max-height 以像素或百分比表示。 auto 将增加（或减少）宽度和高度以占用您使用 MaxSize 指定的空间。它将覆盖您或查看者的浏览器可能具有的图像的任何默认值。我发现它在 Android 的 Firefox 上尤为重要。像素或百分比适用于最大尺寸。将高度和宽度都设置为 auto ，将保留原始图像的纵横比。

如果您想完全填充空间并且不介意图像大于其原始大小，请将两个 max-width s 更改为 min-width: 100% - 这将使它们完全占据它们的空间并保持纵横比。您可以通过 Twitter 个人资料的背景图片查看此示例。

原文由 Woody Payne 发布，翻译遵循 CC BY-SA 4.0 许可协议

CSS 缩小图像以适应包含的 div，而不指定原始大小

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译