背景大小覆盖到img标签

Question

HTML

<div>
<img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" />
</div>

CSS

div{
    width: 200px;
    height: 100px;
    background-color: red;
}
img{
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;

}

为什么背景大小：封面在这里不起作用。这也应该在css3中添加，但不添加。无论如何不要拉伸图像？

我们可以使用background: url("http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg") no-repeat; background-size: cover;

来完成

Answer 1

解决方案＃1 - 新的对象适合属性（Browser support）

只需在img。

上设置object-fit: cover;即可

img {
  display: block;
  width: 200px;
  height: 100px;
  object-fit: cover;
}

<img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" />

您可以在此webplatform article中详细了解此新属性。

从上面的文章 - 关于'封面'值：

  

整个图像按比例缩小或扩展，直到它填满框   完全，保持纵横比。这通常导致   只有部分图像可见。

此外，上面的文章中的a fiddle演示了object-fit属性的所有值。

解决方案＃2 - 用带有css

的背景图像替换img

img {
  position: relative;
  width: 0;
  height: 0;
  padding: 50px 100px;
  background: url(http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg) no-repeat;
  background-size: cover;
}

<img src="http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg" />

Answer 2

别担心！您也可以使用jQuery执行此操作！

var imgSrc=$('div img').attr('src');

$('div img').remove();
$('div').html('<div class="backbg"></div>');
$('.backbg').css('background-image', 'url(' + imgSrc + ')');
$('.backbg').css('background-repeat','no-repeat');
$('.backbg').css('background-size','cover');
$('.backbg').css('width','100%');
$('.backbg').css('height','100%');

demo