заменить все изображения элементом фона div

Question

var all = document.getElementsByTagName( 'img' );
for( i = 0; i < all.length; i++ ){
    var newimg;
    (newimg=document.createElement('div')).style.cssText="display:inline;width:"+all[i].width+"px;height:"+all[i].width+"px;background-image:url("+all[i].src+");";
    all[i].parentNode.replaceChild( newimg, all[i] );
}

заменяет только два изображения (1 и 3) из 4 примеров изображений (test1.jpg to test4.jpg), а также не отображает фоны div.я делаю это неправильно?

сгенерированный результат вывода:

<div style="display: inline; width: 400px; height: 400px; background-image: url(&quot;http://localhost/test1.jpg&quot;);"></div> 
<img src="test2.jpg">
<div style="display: inline; width: 796px; height: 796px; background-image: url(&quot;http://localhost/test3.jpg&quot;);"></div> 
<img src="test4.jpg">

спасибо!

Answer 1

View live demo

Вы должны повторять цикл в обратном направлении. Поскольку при каждой замене img длина массива all уменьшается на единицу. следовательно, вы не можете получить доступ ко всем [1], всем [3] элементам.

Также из-за display:inline, другое изображение css text (height / width / background /) не применяется к вашему div, поэтому удалите его и используйте float:left вместо.

Надеюсь, это поможет.