如何使用Javascript而不是Jquery将Image Source设置为div / img background-image？

Question

如何在JavaScript中执行此操作？

带百分比的高度不适用于chrome，而且这也不适用于IE 5仿真。

我想知道我们是否可以使用JavaScript实现相同的结果，并使高度100％在chrome和IE 5仿真中工作？

$(function() {
    $("button").click(function() {
        $("img").each(function(i, elem) {
            var img = $(elem);
            var processing = $(this).attr("src");
            var div = $("<div />").css({
                "backgroundImage": "url(" + processing + ")",
                width: "100%",
                height: "100%",
            });

            div.html(img.attr("alt"));
            div.addClass("replacedImage");

            img.replaceWith(div);
        });
    });
});

这是我正在寻找的东西，但我们怎么能用javascript做同样的事情？

小提琴示例

 angular. module('myApp', []). directive('myBackgroundImage', function() { return function(scope, element, attrs) { element.css({ 'background-image': 'url(' + attrs.myBackgroundImage + ')', 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'center center' }); }; }); 

 div.wide { width: 200px; height: 100px; border: 1px solid orange; } div.tall { width: 100px; height: 200px; border: 1px solid orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div> <h2>Vanilla Image:</h2> <img src="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif" /> </div> <div> <h2>Fill 200x100</h2> <div class="wide" my-background-image="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif"></div> </div> <div> <h2>Fill 100x200</h2> <div class="tall" my-background-image="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif"></div> </div> </div> 

Answer 1

这是一个纯粹的CSS解决方案。

 div.wide { width: 200px; height: 100px; border: 1px solid orange; background: url("http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif") center center; background-size: cover; } div.tall { width: 100px; height: 200px; border: 1px solid orange; background: url("http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif") center center no-repeat; background-size: cover; } 

 <div ng-app="myApp"> <div> <h2>Vanilla Image:</h2> <img src="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif" /> </div> <div> <h2>Fill 200x100</h2> <div class="wide"></div> </div> <div> <h2>Fill 100x200</h2> <div class="tall"></div> </div> </div>