Question

我正在使用jQuery Flexslider插件来显示100多个图像。我已经使用php中的foreach循环显示所有内容，如下所示：

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

我的图像在600px中都具有相同的高度，但它们的宽度是变化的。有些是肖像图像，有些是风景图像。我想知道在php中是否有一种方法我可以根据它们的宽度添加类来相应地设置两个样式。

例如：

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

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

Answer 1

使用getimagesize：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 =属性。

根据不同的图像尺寸制作Flexslider响应

1 个答案: