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

Question

我需要将此图像拉伸到可能的最大尺寸,而不会溢出<div>或倾斜图像.

我无法预测图像的宽高比,因此无法知道是否使用:

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

要么

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

我不能同时使用两者(即style ="width:100%; height:100%;")因为这将拉伸图像以适应<div>.

该<div>具有的大小为屏幕,这也是不可预测的百分比来设置.

Answer 1

2016年更新:

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

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

Answer 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大小而不会失真.

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

Answer 4

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

可悲的是,浏览器支持并不是那么好用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从文档中删除标记.最后你可以使用

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

希望这可能对某人有帮助,编码愉快!

Answer 5

感谢CSS3

img
{
   object-fit: contain;
}

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

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

Answer 6

仅使用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()事件结合时,当用户调整窗口大小时,图像将会调整.

这并不是试图将图像置于容器中心,这是可能的,但我想这不是你所追求的.

Answer 7

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

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

Answer 8

更新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;

Answer 9

设置外部containerdiv的宽度和高度.然后在img上使用以下样式:

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

这将帮助您保持img的宽高比

Answer 10

如果要在保持图像宽高比的同时设置最大宽度或高度（以便不会太大），则可以执行以下操作：

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