Каждое изображение меньше предыдущего

Question

У меня есть массив с 5 изображениями, которые я отобразил php. Как сделать с JavaScript, что каждое изображение на 10% меньше предыдущего.

foreach($top_images as $top_i) { 
    echo '#'.$ratio; 
    echo ' 
     <br><img src="'.$top_i['url'].'" ><br> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var img = new Image(); 
       img.src = "'.$top_i['url'].'"; 
       img.onload = function() { 
        var width = this.width; 
        var height = this.height; 
        ratio = '.json_encode($ratio).'; 
        this.width = this.width - this.width * ratio/10; 
        this.height = this.height - this.height * ratio/10; 
       } 
       }); 
     </script> 
    '; 
    $ratio++; 
} 

Answer 1

Я бы не смешивал php и js, как вы. Просто выводить изображения обычно с PHP, а затем добавить JS в нижней части вашего сайта: http://jsfiddle.net/78hdpkzr/

$(document).load(function() { 
    lastHeight = 0; 
    $("img").each(function(i) { 
     if (i != 0) { 
      $(this).css({ 
       height: lastHeight/100 * 90 
      }) 
     } 
     lastHeight = parseInt($(this).css('height')); 
    }) 
}) 

Answer 2

Используйте CSS и следующий селектор (работает на всех браузерах)

только вещь изображения должны быть рядом друг с другом

CSS:

img { 
 
    width: 100px; 
 
    float:left; 
 
    clear:both; 
 
} 
 
img + img { 
 
    width: 90px; 
 
} 
 
img + img + img { 
 
    width: 80px; 
 
} 
 
img + img + img + img { 
 
    width: 70px; 
 
} 
 
img + img + img + img + img { 
 
    width: 60px; 
 
}

<img src="http://placehold.it/100x100" /> 
 
<img src="http://placehold.it/100x100" /> 
 
<img src="http://placehold.it/100x100" /> 
 
<img src="http://placehold.it/100x100" /> 
 
<img src="http://placehold.it/100x100" />