如何在保持图像纵横比的同时拉伸图像以填充 <div>？

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 和 HTML 有一种更简单的方法：

HTML：

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

CSS：

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

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

---

这不是一个完美的解决方案，但这个 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%;
}

---

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

---

如果可以，请使用背景图像并设置 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%);
}

希望这可以帮助某人，快乐编码！

---

感谢 CSS3

img
{
   object-fit: contain;
}

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

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

---

仅使用 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() 事件，因此当用户调整窗口大小时，图像也会随之调整。

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

---

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

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

---

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

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

---

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

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

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

---

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

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

HTML（或 php）

div.imgfill { 浮动：左；位置：相对；背景重复：不重复；背景位置：50% 50%；背景尺寸：封面；宽度：33.333%；高度：18vw；边框：1px纯黑色； /*图像的帧*/ margin: -1px; }