HTML、PHP 和 MYSQL 图片彼此相邻

Question

假设我的服务器上有许多由用户上传的图像。每张图片在数据库中也有一行，包含文件名、类别、文件大小、扩展名和位置等信息。

当我想显示这些图像时，我使用 mysql_query 和 while 循环。这行得通，但是图片都有不同的大小，它们彼此相邻或彼此下方显示，看起来非常糟糕。

假设我有 20 张这样的图片，我怎样才能将 5 张图片并排显示，4 行长？？？

Answer 1

假设一个包含图像数据的数字索引对象数组：

<div class="row">
<?php
// loop through all my images taking the index and image object
foreach( $images as $idx=>$image ) {

    // If this isn't the 1st image & the modulus of 5 and $idx is 0, make a new row.
    if( $idx > 0 && !(5%$idx) ) {
        </div><div class="row">
    }
    // Print out the image
    echo '<img src="' . $image->filename . '" />';
} ?>
</div>

如果将第一个数字除以第二个数字，模数基本上就是余数。因此，当我们打印了 5 张图像时，5/5=1 没有余数，因此我们创建了一个新行。

我相信这会创造出类似的东西：

<div class="row">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
</div>
<div class="row">
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
<img src="img9.jpg" />
<img src="img10.jpg" />
</div>

然后可以使用 CSS 设置样式：

<style type="text/css">
    div.row {
       clear:left;
    }
    div.row img {
       float:left;
    }
</style>

在调整图像大小时，您有两种选择：

1. 简单的选项：在 CSS 中设置图像宽度（高度将相应缩放）。这并不完美，如果图像具有不同的纵横比（宽度与高度），仍然会显得凌乱。
2. 使用 PHP 库（如 GD 或 imagick（imagemagick 之上的 PHP 层））调整大小（并在必要时进行裁剪）。我个人更喜欢 GD，因为它与 PHP 打包在一起，因此得到了更广泛的支持。也就是说，imagick 是更快、更简单的代码，所以这取决于你。 This site 很好地比较了两者的图像大小调整。

编辑：在回答您的问题时，您需要执行以下操作来获取图像数组：

<?php
// Build an array of images
$sql = 'SELECT * FROM images';
$result = mysql_query( $sql );

while( $obj = mysql_fetch_object( $result ) ) {
    $images[] = $obj;
}
?>

Answer 2

伪代码

$i = 0;
while($row = mysql_fetch_object($result) {
   //displaying image
   ....
   if($i % 4 == 0) {
          echo '<BR>';
   }
   $i++;
}