画像ソースをdiv/img背景画像として設定するには、Javascriptを使用し、Jqueryを使用しないでください。

Question

JavaScriptでこれを行う方法は？

％での高さはクロムでは機能しません。また、これはIE 5エミュレーションでは機能しません。

私は、JavaScriptを使用して同じ結果を得ることができ、クロームとIE5エミュレーションで高さ100％を使用できるかどうか疑問に思っていましたか？

$(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>