如何模拟背景大小:覆盖<img>？

Question

如何在框内调整图像大小和重新定位,使其覆盖整个框,类似于background-size: cover工作方式.

<div class="box" style="width: 100px; height: 100px;">
  <img src="pic.jpg" width="413" height="325">
</div>

我知道我必须添加overflow:hidden到盒子和图像需要position: absolute.但是什么样的公式让我得到了适合图像的新尺寸,并留下了+顶部位置？

Answer 1

对于它的价值:现在可以用CSS单独完成...

新的CSS属性object-fit(当前浏览器支持)

刚刚成立object-fit: cover;的img

你甚至都不需要包裹img在一个div!

小提琴

img {
  width: 100px;
  height: 100px;
}
.object-fit {
  display: block;
  object-fit: cover;
}
.original {
  width: auto;
  height: auto;
  display: block;
}

<img src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Img 'squashed' - not good</p>
<img class="object-fit" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>object-fit: cover -
   The whole image is scaled down or expanded till it fills the box completely, the aspect ratio is maintained. This normally results in only part of the image being visible. </p>
<img class="original" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Original ing</p>

您可以在此webplatform文章中阅读有关此新属性的更多信息.

此外,这里有一个来自上面文章的小提琴,它演示了object-fit属性的所有值.

Answer 2

足够接近,使用img标签进行背景大小覆盖模拟的纯CSS解决方案,具有非常好的浏览器支持(IE8 +):

.container {

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;

}

.container img {

  position: absolute;
  top: 50%;
  left: 50%;

  width: auto;
  height: auto;

  max-height: none;
  max-width: none;

  min-height: 100%;
  min-width: 100%;

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

}

<div class="container">
  <img src="//lorempixel.com/400/200/sports/1/" />
</div>

Answer 3

这可能会更容易

jQuery的

$('.box').each(function() {
    //set size
    var th = $(this).height(),//box height
        tw = $(this).width(),//box width
        im = $(this).children('img'),//image
        ih = im.height(),//inital image height
        iw = im.width();//initial image width
    if (ih>iw) {//if portrait
        im.addClass('ww').removeClass('wh');//set width 100%
    } else {//if landscape
        im.addClass('wh').removeClass('ww');//set height 100%
    }
    //set offset
    var nh = im.height(),//new image height
        nw = im.width(),//new image width
        hd = (nh-th)/2,//half dif img/box height
        wd = (nw-tw)/2;//half dif img/box width
    if (nh<nw) {//if portrait
        im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
    } else {//if landscape
        im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
    }
});

CSS

.box{height:100px;width:100px;overflow:hidden}
.wh{height:100%!important}
.ww{width:100%!important}

这应该处理任何大小/方向,并且不仅会调整大小,而且会偏移图像.全部没有relative或absolute定位.

做了一个小提琴:http://jsfiddle.net/filever10/W8aLN/

Answer 4

同样，就其价值而言，也可以通过设置“ width”和“ height”来产生相同的效果（设置它们可能会破坏这种方法）：

min-width: 100%; min-height: 100%;

要么

min-width: (your desired percent of viewport width)vw; min-height: (your desired percent of viewport height)vh;

与

overflow: hidden;

在父母

:)