Jquery 背景尺寸盖至img标签

html

为什么背景尺寸：封面在这里不起作用。这也应添加到css3中，但不应添加。是否有任何方法不拉伸图像

---

我们可以使用

background:url（“http://www.hdwallpapersplus.com/wp-content/uploads/2013/06/abstract_color_background_picture_8016-wide.jpg）无重复；背景尺寸：封面
别担心！您也可以使用jQuery来实现这一点

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

}

var imgSrc=$（'div img'）.attr（'src'）；
$（'div img'）。删除（）；
$（'div'）.html（“”）；
$（'.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%）；

解决方案#1-新的对象拟合属性（）
只需设置
对象匹配：封面


img{
显示：块；
宽度：200px；
高度：100px；
对象匹配：覆盖；
}
背景大小属性指定背景图像的大小。所以，如果您将backgroundimage设置为div，并设置此属性，那么它将起作用。此处为，没有任何背景图像集。您是否希望前景图像受到背景样式的影响？抱歉，这不是它的工作方式。背景大小属性不适用于image@Spudley工作正常吗：前景图像？@NavinRauniyar:您在
中指定的图像是前景图像；它是
img
元素的内容。它不是背景图像，不会对CSS背景样式做出反应。您可以将CSS中的背景图像设置为普通，就像任何其他元素一样（它将通过前景图像的任何透明位显示），并且可以使用
背景大小
设置背景图像的样式。你在问题的末尾提到你可以这样做；如果你想使用
背景大小
样式，那就是你必须要做的。FWIW：你可以单独用css来做上面的事情。（看看我的答案）你可以，但如果可能的话，你应该尽量避免使用javascript。出于理智的考虑，不要使用这种混乱。虽然我想说这两种解决方案中的任何一种都是可行的，但它们都不是真的。从开发人员的角度来看，将img标记上的宽度和高度设置为填充值是非常困难的。如果你想让你的图像具有响应性，或者只是在宽度/高度上有所不同，那么你仍然需要在JS中应用这些值。看起来它也在FF和Android上工作@rorymorris设置背景图像是我看到的问题。如果我们只使用
attr（src-url）
，那么我们就可以避免使用JS，但遗憾的是，在撰写本文时，还没有浏览器实现该规范。解决方案#1非常有效，应该选择这一点作为答案。
div{
    width: 200px;
    height: 100px;
    background-color: red;
}
img{
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;

}

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