jQuery获取每个图像的src属性并将其放置为DIV背景

Question

请帮助我使用jQuery代码。

需要获取每个图像（img）属性并将其放置在div的背景中。 我已经有了这个，但是它不能以正确的方式工作：

var $source = $("img").attr("src");
$('div').each(function () {
    $(this).css({
        'backgroundImage': 'url(' + $source + ')'
    });
});

请检查链接： JSFIDDLE

PS 。

在解决方案中为每个图像添加特定的类，因为列表将非常大且动态。

Answer 1

这样尝试

jQuery(document).ready(function ($) {
    $("img").each(function () {
        var $source = $(this).attr("src");
        $(this).next("div").css({
            'backgroundImage': 'url(' + $source + ')'
        });

    });
});

的jsfiddle

Answer 2

这就是我的方法。 这样，无论大小如何，图像都会覆盖整个div。

HTML:
<div class="imagebox"><img src="../img/picture.jpg"></div>

。

CSS:
.hide { 
   opacity:0; 
}
.imagebox { 
   background-size: cover;  
   background-position: center;
}

。

CODE:
var imgurl = jQuery("img").attr("src"); // or specific jQuery(".imagebox img").attr("src");
var imgclass = "hide";
jQuery(".imagebox").css("background-image","url("+imgurl+")");
jQuery("img").addClass(imgclass);