jquery - 背景大小覆盖到 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 - 新的对象匹配属性（浏览器支持）

只需object-fit: cover;在 img 上设置。

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 文章中阅读有关此新属性的更多信息。

从上面的文章 - 关于“封面”价值：

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

此外，这是上述文章中的一个小提琴object-fit，它演示了该属性的所有值。

解决方案 #2 - 将 img 替换为带有 css 的背景图像

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%');

演示