javascript - 如何使用 Javascript 而不是 Jquery 将图像源设置为 div/img 背景图像？

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 做同样的事情？

Fiddle Example

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>