使图像完全填充div而不拉伸答案

【问题标题】：Make image fill div completely without stretching使图像完全填充div而不拉伸
【发布时间】：2013-05-20 08:18:59
【问题描述】：

我有不同尺寸的大图像，需要在两个维度上完全填充 240 像素 x 300 像素的容器。这是我现在得到的，仅适用于一维：

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
max-width: 100%;
height: auto;
}

比例应该保持不变。本质上，宽图像应该在宽度上被切断，而高图像需要在高度上被切断。因此，只需放大到填充容器所需的量即可。

不知道为什么我不能让它工作，我需要 JavaScript 吗？

编辑：要清楚。我需要小提琴上的所有红色都消失了。进来的图像是动态的，因此我不能使用背景图像。我愿意使用 JavaScript。谢谢！ :)

【问题讨论】：

不确定是否支持跨浏览器 - jsfiddle.net/HsE6H/2
抱歉，可能不太清楚：我需要图像填充整个 div，以便所有“红色”消失。有任何想法吗？ :)
如果不以不同的比例缩放两个轴，您将无法拍摄“不同尺寸的大图像”并将它们完美地适合固定尺寸的容器。如果按比例缩放图像，则源的比例将与目标的比例相同。
就像Blaise Swanwick 说的那样，仅通过css 是不可能的，您需要使用一些服务器端代码和图像处理库来调整图像大小。
有什么想法吗？对涉及 JS 的解决方案非常开放。

标签： javascript html css image

【解决方案1】：

如果您需要将img标签插入div标签，以下解决方案非常简短：

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}

Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>

<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>

另外，如果你不需要使用 div，你可以写一个更短的 css：

 img
    {
        max-height: 300px;
        max-width: 240px;
    }

【讨论】：

【解决方案2】：

这是我发现的另一种解决方案，不需要单独的纵向、横向或脚本。

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

就是这样，很好用……

https://jsfiddle.net/efirat/17bopn2q/2/

【讨论】：

正是我正在寻找的解决方案。可惜它没有回答上面的问题。我认为他们想完全填满容器，即使图像的一部分被裁剪。所以蓝色区域不应该是可见的。
@Rubiksmomo 对不起，我刚刚解决了我自己的问题，你是对的。问题不同，但是，这段代码也适用于其他人......谢谢。

【解决方案3】：

如果您将以下内容添加到父 div 以进行 img 样式，则它可以工作； https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

【讨论】：

【解决方案4】：

使用图像作为 Div 背景有许多缺点（例如缺少 SEO 的 ALT）。代替它，在图片标签样式中使用object-fit: cover;！

【讨论】：

【解决方案5】：

我遇到了这个话题，因为我试图解决一个类似的问题。然后一个灯泡在我脑海中亮了起来，我简直不敢相信它真的起作用了，因为它是如此简单和如此明显。

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
min-width:100%;
min-height:100%;
}

只需将 min-width 和 min-height 设置为 100%，它就会自动调整大小以适应 div，并切断多余的图像。不用大惊小怪。

【讨论】：

【解决方案6】：

我们通过使用上述 jQuery 方法的变体的 Angular 应用程序走上了这条道路。然后我们的一位聪明的同事提出了一种纯 CSS 方法。在此处查看此示例：https://jsfiddle.net/jeffturner/yrrncees/1/。

基本上使用 line-height 为我们解决了这个问题。对于那些不想打小提琴的人，代码片段是：

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

关键在于使用 line-height 并设置容器来做同样的事情。

【讨论】：

OP（实际上是我）正在寻找一种解决方案，让图像填充 div 而不留下背景空白。不幸的是，这并没有做到这一点。

【解决方案7】：

对于任何想要这样做但没有动态图像的人，这里有一个使用背景图像的全 CSS 解决方案。

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

“background-size:cover”使得图像可以缩放以覆盖所有 div，同时保持纵横比。 CSS 也可以移动到 CSS 文件中。虽然如果它是动态生成的，那么 background-image 属性将不得不保留在 style 属性中。

【讨论】：

【解决方案8】：

我使用了这个插件，它占任何比例。它还需要imagesloaded 插件才能工作。这对于需要此处理的站点上的大量图像很有用。启动也很简单。

https://github.com/johnpolacek/imagefill.js/

【讨论】：

【解决方案9】：

你应该试试这个：

img {
    min-width:100%;
    min-height:100%;
}

【讨论】：

这适用于短期修复，但大图像无法适当缩小。

【解决方案10】：

后台可以这样做

将图片设置为背景

2.

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

或

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：

谢谢先生！我不敢相信没有人支持这个.. 这是一个测试：jsfiddle.net/yrrncees/8
值得注意的是，在使用此解决方案时，为了便于访问，最好在 div 中包含图像的隐藏版本。这样您就可以设置 alt 标签，并且禁用 CSS 的用户仍然可以查看站点并查看图像。如果这样做，最好避免使用display: none，因为某些屏幕阅读器会跳过具有这些样式的元素。
从 2017 年 9 月开始，背景图像不打印，在 chrome 中您可以设置样式以使其打印，但在其他浏览器中则不然。

【解决方案11】：

自动调整图像大小以适应 Div - 使 CSS 工作

这是一种方法，从以下 HTML 开始：

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

和 CSS：

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

和演示小提琴：http://jsfiddle.net/audetwebdesign/QEpJH/

当您将图像定向为纵向时，您需要将宽度缩放到 100%。相反，当图像是横向时，您需要缩放高度。

不幸的是，CSS 中没有针对图像纵横比的选择器组合，因此您无法使用 CSS 选择正确的缩放比例。

此外，由于图像的左上角固定在包含块的左上角，因此您没有简单的方法使图像居中。

jQuery 助手

您可以使用以下 jQuery 操作来确定要设置的类关于图像的纵横比。

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

对于.container中的每张图片，获取高度和宽度，测试是否width<height，然后设置相应的类。

另外，我添加了一个检查以考虑包含块的纵横比。之前，我隐含地假设了一个方形视图面板。

【讨论】：

嗨。谢谢，这很好用 - 很好的解释！
很高兴为您提供帮助！如果需要，您可以修饰 jQuery 以使图像居中。
但是，div 的尺寸是 240x300，所以简单的 imgW
我扩展了 jQuery 代码以考虑视图面板的纵横比。
@User 其中一张图片坏了，是你看到的问题吗？

【解决方案12】：

在你的 CSS 文件中取出行：max-width:100% 似乎可以解决问题。

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

您还可以在 HTML 文件的结束 div 中添加 > 可以使代码更整洁。

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

这是一个有效的 JSFiddle 链接：http://jsfiddle.net/HsE6H/19/

【讨论】：

是的，占位符图像在那里有点误导。这只是使图像全尺寸，而我希望它们尽可能小，同时仍然填充整个容器。

【解决方案13】：

这可以完成这项工作：

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}

【讨论】：

不，它改变了比例。