如何在保持图片比例的情况下拉伸图片以填充<div>元素？

Question

我需要将这张图片拉伸到最大尺寸，同时不让它溢出其<div>或扭曲图像。

由于我无法预测图片的宽高比，因此无法确定要使用哪种方法：

<img src="url" style="<b>width</b>: 100%;">

或者

<img src="url" style="<b>height</b>: 100%;">

我不能同时使用两者（即style="width: 100%; height: 100%;"），因为这会拉伸图片以适应<div>。

<div> 的大小是根据屏幕百分比设置的，这也是不可预测的。

- Giffyguy

---

如果您需要图像填充div相应的高度或宽度，我只能想到使用JavaScript。您有兴趣探索这个吗？ - o.k.w

相关链接：https://dev59.com/MnRA5IYBdhLWcg3w6SNH - Mottie

答案是object-fit，请查看（并点赞）下面@daniels的回答。 - ᴍᴇʜᴏᴠ

@aexl 感谢您提醒我这个问题。这个问题已经有11.5年的历史了，当天我就接受了那个答案。XD 我选择了一个不同的答案，似乎比你提到的那个更相关。如果您有不同意见，请告诉我。实际上我并不是一个网页开发者，只是一个C++程序员，对于在这里选择最佳答案并不了解太多。 - Giffyguy

Answer 1

更新2016年:

现代浏览器表现得更好了。你只需要将图像宽度设置为100%即可（演示）

.container img {
   width: 100%;
}

---

由于你不知道宽高比，所以需要使用一些脚本。以下是我使用jQuery的方法（演示）:

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

超文本标记语言

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

脚本

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

- Mottie

---

为什么这个答案被认为是正确的？问题是关于图片太小而无法填满容器的情况。也就是说，如何按比例缩放图像以填满其容器的宽度或高度，而不会破坏图像的长宽比。此外，在您的演示中，删除“width:auto”或“height:auto”属性并不会影响您的图像显示。实际上，您应用于图像的所有属性中，只有“max-width: 100%”有任何效果，并且它只对横向图像产生影响。但最重要的是，您的回答并不能帮助拉伸小图像以填满较大的容器。 - matty

无用的代码，演示根本什么也不显示。http://www.w3schools.com/cssref/pr_dim_height.asp 高度和宽度的默认值为“auto”。你的“height: auto;”和“width: auto;”应该如何影响元素？另外两个类的样式相同。有没有想法为什么这个答案得到了77个赞？ - BeRocket

@Mottie “但是只限制一个方向” - 如何实现？默认情况下，height和weight都设置为auto。您可以手动将height设置为auto。这有什么变化吗？“2009年已经回答了”- 我理解，但是该答案仍然在搜索结果中排名较高，因此如果您能使其更新，那将非常棒 =) - BeRocket

@BeRocket 我已经更新了我的回答。有趣的是，似乎你只需要设置宽度。 - Mottie

为什么在一个 div 中放置一个简单的 img 需要 jQuery？也许有更简单的方法。 - chicken burger

Answer 2

只使用 CSS 和 HTML 就能更加容易地完成此操作：

HTML：

<div 
    class="fill" 
    style="background-image: url('path/to/image.jpg');">
</div>

CSS：

.fill {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

这将把您的图像作为背景放置，并拉伸以适应

大小，而不会发生扭曲。

- Ryan

---

这是否可以处理未定义数量的图像？ - TrtG

background-size: cover; 这里是真正的魔法，在 CSS3 中，但在大多数最近的浏览器版本中有合理的支持（请参见：http://www.w3schools.com/cssref/css3_pr_background-size.asp） - Jon Marnock

值得考虑将图片网址包含在HTML中，以便分开样式和内容，例如：<div style="background-image: url('path/to/image.jpg');" class="fill"></div>。 - binaryfunt

background-size: cover 不会 保持纵横比，与元素不成比例的图像部分将被裁剪。请参考此处。 - Yao

@Alex_Zhong，你误解了纵横比。纵横比意味着图像在任何方向上都不会被拉伸（因此完美的圆形在宽度或高度上都不会变成椭圆形）。裁剪可能是保持纵横比的必要部分（正如在OP的用例中一样）。 - Jeremy Moritz

它也适用于Django。 - Ajani Timothy

Answer 3

这不是一个完美的解决方案，但这个CSS或许能帮到你。缩放是使代码生效的关键，理论上因子应该为无限大才能理想地适用于小图像-但在大多数情况下，2、4或8的因子都可以正常工作。

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

- Prouda

---

我希望这在Firefox中能够工作。为什么Firefox不支持‘缩放’呢？ - matty

火狐浏览器仍未实现“缩放”功能，但以下是该问题的错误链接，供将来参考：https://bugzilla.mozilla.org/show_bug.cgi?id=390936 - Adam Taylor

我喜欢这个，我将其保存为 .stretchy 并充分利用它。 - FoxDeploy

Answer 4

如果您能将图像设置为 background-image，那么您可以执行以下操作，这将裁剪图像而不会拉伸它：

<div style="background-image: url(...); background-size: cover; width: 100%; height: 100%;"></div>

如果你需要继续使用 <img> 标签，那么从2019年开始，你可以使用 object-fit CSS 属性，该属性接受以下值：
fill | contain | cover | none | scale-down

请参阅https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

例如，你可以有一个容器来装载一张图片：

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

- Ed Stennett

Answer 5

如果可以的话，使用背景图像并设置background-size: cover。这将使背景覆盖整个元素。

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

如果您必须使用行内图片，有几个选项可供选择。首先是object-fit属性，它作用在图片、视频和其他类似对象上，类似于background-size: cover。

CSS

img {
  object-fit: cover;
}

遗憾的是，浏览器支持不太好，IE版本高达11都没有支持它。下一个选项使用jQuery。

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

自定义jQuery插件

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

像这样使用插件

jQuery('.cover-image').coverImage();

它将获取一张图片，将其设置为图片包装元素的背景图像，并从文档中删除 img 标签。最后你可以使用。

Pure CSS

你可以将这个作为回退方案。图片会缩放以覆盖其容器，但不会缩小。

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

希望这能对某人有所帮助，愉快地编码！

- daniels

---

我正在寻找一种纯CSS解决方案，以使图像填充给定容器，而不使用background-image和background-size。这里的CSS代码适用于>=IE9和现代浏览器。CodePen演示在此处。 - FLOQ Design

在纯CSS中，我删除了min-并改为width: 100%; height: 100%;，然后就可以工作了！太棒了！+1 谢谢！ - Guilherme Nascimento

如果您不希望图像被裁剪，那么“background-size: contain”也非常有用。 - Ponkadoodle

你可以在纯CSS解决方案中添加zoom:0.001以进行缩小。 - Ivor Zhou

Answer 6

由于CSS3的存在，感谢它让网页设计变得更加美观。

img
{
   object-fit: contain;
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

一如既往，IE和EDGE是局外人：http://caniuse.com/#feat=object-fit

- It_Never_Works

Answer 7

仅使用HTML和CSS是不可能做到的，或者至少非常奇特和复杂。如果你愿意加入一些JavaScript，这里有一个使用jQuery的解决方案：

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

这将调整图像大小，使其始终适合父元素，无论其大小如何。并且由于它绑定到$(window).resize()事件，当用户调整窗口大小时，图像将自动调整。

这不会尝试将图像居中在容器中，虽然这是可能的，但我想这不是您想要的。

- Tatu Ulmanen

---

我认为 $img.parent(); 应该真正是 $i.parent();。 - Jimbo Jonny

今天是可能的。 { 宽度：自动； 最大宽度：无； 最大高度：100％； 对象适配：包含； } - Luã Melo

Answer 8

您可以在父级 div 上使用 object-fit: cover;。 https://css-tricks.com/almanac/properties/o/object-fit/

- Amrit Anandh

---

很遗憾，目前IE和Edge还不支持此功能 :( http://caniuse.com/#feat=object-fit - LukeP

宽度：自动； 最大宽度：无限制； 最大高度：100％； 对象适配方式：包含； - Luã Melo

Answer 9

如果您想设置图片的最大宽度或高度（以避免其过大），同时保持其宽高比，可以这样做：

img{
   object-fit: contain;
   max-height: 70px;
}

- Bohao LI

Answer 10

设置外部 container div 的宽度和高度。然后在 img 上使用以下样式：

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

这将帮助你保持图像的宽高比。

- Chintan Bhatt

---

它无法填满这个区块。 - Sven van den Boogaart