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

【问题标题】：CSS scale down image to fit in containing div, without specifing original sizeCSS缩小图像以适应包含div，而不指定原始大小
【发布时间】：2013-09-07 12:37:00
【问题描述】：

我想有一个网站，我可以上传不同大小的图像以显示在 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%。但这不起作用。

【问题讨论】：

尝试#im img{ display:block;高度：100%； width:100%;} 但小图像可能看起来很糟糕..！
奇怪的是，您说将图像的max-width 设置为 100% 并没有帮助。 It works perfectly.
Image auto resize to fit div container的可能重复

标签： html css scaling

【解决方案1】：

您可以使用background image 来完成此操作；

来自 MDN - Background Size: Contain:

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

Demo

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>

【讨论】：

问题：背景图片对 SEO 不友好。

【解决方案2】：

这是我知道的一个老问题，但在几个相关的 Google 搜索中，这是前五名。这是仅 CSS 的解决方案，无需将图像更改为背景图像：

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

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

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

【讨论】：

对MaxSize的支持怎么样？
这只是你想使用的最大宽度和最大高度的占位符，以像素或百分比为单位（前提是在父级上设置了宽度和高度。）
关心扩展什么特别不起作用？很难解决“不起作用”的问题:)
@WoodyPayne 你把这些行放在哪里？在div 对象内还是必须访问custom.css 文件？
请添加您将其设置为 img 本身，而不是其容器。

【解决方案3】：

如果你想要宽度和高度，你可以试试

 background-size: cover !important;

但这不会扭曲图像但会填充 div。

【讨论】：

【解决方案4】：

我相信这是最好的方法，我已经尝试过了，效果很好。

#img {
  object-fit: cover;
}

This is where I found it。祝你好运！

【讨论】：

目前浏览器支持不佳。否则这将是最好的解决方案。

【解决方案5】：

这很简单。只需将 img 的宽度设置为 100%

【讨论】：

这不适用于纵横比小于 1 的图像。
如果 div 容器大于图像，这也会放大图像

【解决方案6】：

希望这将解决古老的问题（不使用 CSS background 属性）

HTML

<div class="card-cont">
 <img src="demo.png" />
</div>

CSS

.card-cont{
  width:100%;
  height:150px;
}

.card-cont img{
  max-width: 100%;
  min-width: 100%;
  min-height: 150px;
}

【讨论】：

【解决方案7】：

我正在使用这个，无论是小图还是大图：

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}

【讨论】：

【解决方案8】：

我用：

对象匹配：封面；
-o-object-fit：覆盖；

要将图像放置在具有固定高度和宽度的容器中，这也适用于我的滑块。然而，它会根据它的不同切割部分图像。

【讨论】：

不知道为什么它被否决了。这是永远的选择！

【解决方案9】：

在一个网页中，我希望图像随着浏览器大小的变化而缩放并保持在顶部，紧挨着一个固定的 div，我所要做的就是使用一个 CSS 行：overflow:hidden;，它就成功了.图像完美缩放。

特别棒的是这是纯 css，即使关闭 Javascript 也能正常工作。

CSS：

#ImageContainerDiv {
  overflow: hidden;
}

HTML：

<div id="ImageContainerDiv">
  <a href="URL goes here" target="_blank">
    <img src="MapName.png" alt="Click to load map" />
  </a>
</div>

【讨论】：

对于大图像，它将剪切/隐藏多余的部分而不是缩小。

【解决方案10】：

其中一些东西对我不起作用……但是，它确实起作用了。将来可能会帮助其他人。这是 CSS：

    .img-area {
     display: block;
     padding: 0px 0 0 0px;
     text-indent: 0;
     width: 100%;
     background-size: 100% 95%;
     background-repeat: no-repeat;
     background-image: url("https://yourimage.png");

    }

【讨论】：