php - 使 Flexslider 响应基于不同的图像大小

Question

我正在使用 jQuery Flexslider 插件来显示 100 多张图片。我已经使用 php 中的 foreach 循环将它们全部显示出来，如下所示:

<?php foreach (glob('images/glob/*') as $filename): ?>
   <li> <img src="<?= $filename ?>"/> </li> 
<?php endforeach; ?>

我的图片都具有相同的高度(600 像素)，但它们的宽度各不相同。有些是肖像图像，而另一些是风景图像。我想知道在 php 中是否有一种方法可以添加类以根据它们的宽度相应地设置两者的样式。

例如:

if 
   ( $img width > $img height ).addClass (landscape)
else
   ( $img height > $img width ).addClass (portrait)

显然上面的语句不起作用，但有人可以告诉我如何将它添加到我的 foreach 语句中，以便我可以将类添加到不同的图像中吗？

Answer 1

使用获取图像大小:http://www.php.net/manual/en/function.getimagesize.php

foreach (glob('images/*') as $filename) {
    $size = getimagesize($filename); 
    if ( $size[0] > $size[1] ) {
        $class="landscape";
    }
    else {
        $class="portrait";
    }

    print  '<li> <img src="'. $filename.'" '.$size[3].' class="'.$class.'" /> </li>';
}

$size[3] 用于向 img 元素添加适当的 width= 和 height= 属性。