每张图片都比上一张少答案

【问题标题】：Each image less than the previous每张图片都比上一张少
【发布时间】：2015-04-22 08:59:47
【问题描述】：

我有 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++;
}

【问题讨论】：

标签： javascript image image-scaling

【解决方案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'));
    })
})

【讨论】：

【解决方案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" />

【讨论】：