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

Имеется массив из 5 изображений, который отображается с помощью php:

foreach($top_images as $top_i) {
<br><img src="'.$top_i['url'].'" ><br>
}

В JavaScript'e совсем новичок, прошу совета, как сделать JavaScript'ом, чтобы каждое изображение было на 10% меньше предыдущего.

Прилагаю мой код (который, естественно, не работает):

foreach($top_images as $top_i) {
    echo '#'.$ratio;
    echo '

        <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;
                    //img.css("width", width - width * ratio/10);
                    //img.css("height", height - height * ratio/10);
                }
                });
        </script>
    ';
    $ratio++;
}