【问题标题】：How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?如何在保持图像纵横比的同时拉伸图像以填充 <div>？
【发布时间】：2010-12-25 21:34:39
【问题描述】：

我需要将此图像拉伸到可能的最大尺寸，而不会溢出它的<div> 或扭曲图像。

我无法预测图像的纵横比，所以无法知道是否使用：

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

或

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

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

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

【问题讨论】：

如果需要图片将高度或宽度填充到div对应的尺寸，我只能考虑使用javascript。这是您热衷于探索的事情吗？
相关：stackoverflow.com/questions/787839/…
答案是object-fit，请参阅（并点赞）@daniels below
@aexl 感谢您提醒我这一点。这个问题是 11.5 岁，我在同一天接受了这个答案。 XD 我选择了一个不同的答案，这似乎比你提到的更相关。如果您不同意，请告诉我。我实际上不是 Web 开发人员，只是 C++，所以我不会在这里选择最佳答案。

标签： image html size

【解决方案1】：

2016 年更新：

现代浏览器的表现要好得多。您需要做的就是将图像宽度设置为 100% (demo)

.container img {
   width: 100%;
}

由于您不知道纵横比，因此您必须使用一些脚本。以下是我将如何使用 jQuery (demo)：

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;
}

HTML

<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);
 })
})

【讨论】：

用户可以看到调整大小之前的图像吗？有人测试过吗？
解决方案几乎是正确的，您只需在 css 中反转高度和宽度：如果图像“高”，那么宽度应该是 100% 而不是高度（会更大和溢出）。对于宽幅照片，反之亦然。
@mbritto：你说得对，我不得不将 css 更改为 max-width/height 并添加了 demo
@Mottie 有没有办法让 930 像素宽度的图像适合 960 像素的容器而不会丢失图像质量
为什么这是公认的答案。问题是图像对于它们的容器来说太小了。即如何放大图像以填充其容器的宽度或高度，而不会混淆图像的纵横比。此外，在您的演示中，删除 width:auto 或 height:auto 属性不会影响图像的显示。事实上，在您应用到图像的所有属性中，只有max-width: 100% 有任何效果，它只影响风景图像。但最重要的是，您的回答无助于拉伸小图像以填充更大的容器。

【解决方案2】：

仅使用CSS 和HTML 有一个更简单的方法：

HTML：

<div class="fill"></div>

CSS：

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

这会将您的图像作为背景，并拉伸它以适合div 大小而不会变形。

【讨论】：

对于未定义数量的图像，这可能吗？
background-size: cover; 是这里真正的魔力，它是 CSS3，但在最新版本上具有合理的浏览器支持（请参阅：w3schools.com/cssref/css3_pr_background-size.asp）
可能值得在 HTML 中包含图像 url，以便分隔样式和内容，即 <div style="background-image: url('path/to/image.jpg');" class="fill"></div>
background-size: cover 不保持纵横比，与元素不成比例的图像部分被裁剪。参考here
@Alex_Zhong，你误解了纵横比。纵横比意味着图像不会在任何方向上拉伸（因此完美的圆形不会在宽度或高度上变成椭圆形）。裁剪可能是保持纵横比的必要部分（就像在 OP 的用例中一样）。

【解决方案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%;
}

【讨论】：

我希望这可以在 Firefox 中使用。为什么没有来自 Firefox 的 zoom 爱！？
Firefox 仍然没有实现zoom，但这里是错误链接以供将来参考：bugzilla.mozilla.org/show_bug.cgi?id=390936
我喜欢这个，我将它保存为 .stretchy 并充分利用它。

【解决方案4】：

2019 年更新。

您现在可以使用接受以下值的object-fit css 属性：fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/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;
}

【讨论】：

【解决方案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;
}

如果您不喜欢使用内嵌图片，有几个选择。首先，有

对象拟合

此属性作用于类似于background-size: cover 的图像、视频和其他对象。

CSS

img {
  object-fit: cover;
}

可悲的是，browser support 在 IE 版本 11 之前根本不支持它的情况下并不是很好。下一个选项使用 jQuery

CSS + jQuery

HTML

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

CSS

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

自定义jQuery plugin

(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 标签。最后你可以使用

纯 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%);
}

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

【讨论】：

我正在寻找一种纯 CSS 解决方案，让 图像填充给定容器，而不使用 background-image 和 background-size，这里的 CSS 代码适用于 >=IE9和现代浏览器。 CodePen demo here
在 Pure CSS 中，我删除了 min- 并更改为 width: 100%; height: 100%; 并开始工作！很棒的解决方案！ +1 谢谢！
background-size: contain 如果您不希望任何图像被剪裁，也很有用。
您可以将zoom:0.001添加到Pure CSS解决方案中以进行缩减。

【解决方案6】：

感谢 CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

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

【讨论】：

【解决方案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() 事件，当用户调整窗口大小时，图像也会随之调整。

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

【讨论】：

我假设 $img.parent();真的应该是 $i.parent();
今天是可能的。 {宽度：自动；最大宽度：无；最大高度：100%；对象拟合：包含； }

【解决方案8】：

您可以在父 div 上使用object-fit: cover;。

https://css-tricks.com/almanac/properties/o/object-fit/

【讨论】：

目前还没有 IE 或 Edge 支持 :( caniuse.com/#feat=object-fit
宽度：自动；最大宽度：无；最大高度：100%；对象拟合：包含；

【解决方案9】：

如果您想在保持图像纵横比的同时设置最大宽度或高度（使其不会太大），您可以这样做：

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

【讨论】：

【解决方案10】：

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

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

这将帮助您保持图像的纵横比

【讨论】：

它不会填满 div。

【解决方案11】：

我在寻找类似问题时遇到了这个问题。我正在制作一个具有响应式设计的网页，并且放置在页面上的元素的宽度设置为屏幕宽度的百分比。高度使用 vw 值设置。

由于我使用 PHP 和数据库后端添加帖子，因此纯 CSS 是不可能的。然而，我确实发现 jQuery/javascript 解决方案有点麻烦，所以我想出了一个简洁的（所以我认为至少是我自己）解决方案。

HTML（或 php）

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

通过使用 style=""，可以让 PHP 动态更新我的页面，并且 CSS 样式与 style="" 将最终形成完美覆盖的图像，并缩放以覆盖动态 div-tag。

【讨论】：

【解决方案12】：

为了使该图像拉伸到最大尺寸而不溢出它是或歪斜图像。

申请...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

图像的样式。

【讨论】：

【解决方案13】：

使用此方法，您可以使用不同比例的 div 和图像填充您的 div。

jQuery：

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML：

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS：

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

【讨论】：

【解决方案14】：

这对我有用

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

【讨论】：

【解决方案15】：

如果您使用 IMG 标签，这很容易。

我做了这个：

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

但我没有找到如何使它与 #pic { background:url(img/menu.png)} 一起使用有人吗？谢谢

【讨论】：

进行了更改并找到了我的问题的答案！不，它会对某人有所帮助。背景图片：网址（图片/menu.png）；背景重复：不重复；位置：绝对；背景尺寸：300px；高度：100%；宽度：100%；您可以使用 javascript 或 jquery 更改背景大小的值（ .attr({ 'style':'background-size:150px auto; left:50px; top:50px;' }) ）

【解决方案16】：

我有类似的问题。我用 just CSS 解决了它。

基本上Object-fit: cover 可帮助您在将图像定位在 div 内时完成保持纵横比的任务。

但问题是Object-fit: cover 在 IE 中不起作用，它占用了 100% 的宽度和 100% 的高度，并且纵横比被扭曲了。换句话说，我在 chrome 中看到的图像缩放效果不存在。

我采用的方法是使用 absolute 将图像放置在容器内，然后使用以下组合将其放在中心：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它在中心，我给图像，

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使得图像得到Object-fit:cover的效果。

这里是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。

【讨论】：

这种方法的缺点是当真实图片尺寸小于它的容器时，图片不会被扩展以填满容器。
你确定吗？因为height:100% 和/或width:100% 分别将容器填充到整个高度和宽度。如果您可以分享一个 jsfiddle 链接，这将有助于您了解您所考虑的限制。

【解决方案17】：

HTML：

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

...如果你想设置或更改图像（以#foo为例）：

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript：

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

【讨论】：

【解决方案18】：

这里找到的许多解决方案都有一些限制：一些不能在 IE（object-fit）或旧版浏览器中工作，其他解决方案不能放大图像（仅缩小它），许多解决方案不支持调整窗口大小而且很多都不是通用的，要么期望修复分辨率或布局（纵向或横向）

如果使用 javascript 和 jquery 不是问题，我有这个基于 @Tatu Ulmanen 代码的解决方案。我修复了一些问题，并添加了一些代码，以防图像被动态加载并且在开始时不可用。基本上这个想法是有两个不同的css规则并在需要时应用它们：一个是限制是高度时，所以我们需要在侧面显示黑条，另一个是限制是宽度时的css规则，所以我们需要在顶部/底部显示黑条。

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
});

对于像这样的 HTML 元素：

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>

【讨论】：

【解决方案19】：

试试这个

HTML：

<div class="container"></div>

CSS：

.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}

【讨论】：