php - 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>

在调整图像大小时，您有 2 个选择:

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;
}
?>