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 许可协议

阅读 308
2 个回答

您可以使用 背景图像 来完成此操作;

来自 MDN - 背景大小:包含

该关键字指定背景图片在保证其两个尺寸小于或等于背景定位区域对应尺寸的情况下,尽可能地缩放。

演示

CSS:

 #im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

 <div id="wrapper">
    <div id="im">
    </div>
</div>

原文由 dc5 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题