Question

我在设计上计划要从表中获取所有图像，并分别调整任何尺寸的图像的大小。因此，类名是更改大小的关键。如何显示不同的尺寸？

include 'conn.php';

$viewquery= "SELECT id, product_image, product_cat FROM products WHERE product_cat LIKE 'Sale'";

$result = mysqli_query($connection, $viewquery);
$fetch = mysqli_fetch_assoc($result);

echo' <div class="div-frame-five">';
    echo' <img src="images/'.$fetch["product_image"].'" alt="" class="image-one-frame">';
    echo' <img src="images/'.$fetch["product_image"].'" alt="" class="image-two-frame">';
    echo' <img src="images/'.$fetch["product_image"].'" alt="" class="image-three-frame">';
    echo' <img src="images/'.$fetch["product_image"].'" alt="" class="image-four-frame">';
echo' </div>';

示例

Answer 1

您可以使用类使用CSS设置图像格式。例如-

img {
  height: 200px; // set a standard height
  padding-bottom: 5px; // add a space between the img rows
}
.image-one-frame, .image-four-frame {
  width: 66%; // make one and four 2/3 the width
}
.image-two-frame, .image-three-frame {
  width: 33%; // make two and three 1/3 the width
}
.image-one-frame, .image-three-frame {
  float: left; // make one and three float left
}
 .image-two-frame, .image-four-frame {
  float: right; // make two and four float right
}

请参阅https://jsfiddle.net/5ry7dLug/10/

Answer 2

这将遍历您的结果集，并将img宽度更改为66％至33％。还有很多其他方法可以解决此问题，但这可能是目前最简单的方法。

尝试一下：

include 'conn.php';

$viewquery= "SELECT id, product_image, product_cat FROM products WHERE product_cat LIKE 'Sale' AND id LIKE '23'";

$result = mysqli_query($connection,$viewquery);
$fetch = mysqli_fetch_all($result, MYSQLI_ASSOC)

echo '<div class="div-frame-five">';

$size = TRUE;

foreach($fetch as $image) {
    echo '<img src="images/' . $image["product_image"] . '" alt="" class="image-one-frame" style="width:' . (($size = !$size) ? '66%' : '33%') . ';">';
}

echo '</div>';

Answer 3

根据我从评论中收集的信息，您正在寻找如何迭代和显示示例模式中的图像。如果要设置数据库中图像的尺寸，则需要更改表以包括图像尺寸。

首先，为了检索和遍历数据库中的每个图像。您可以使用以下内容。

示例：https://3v4l.org/5WOEJ

<?php
require_once __DIR__ . '/conn.php';

$viewquery= 'SELECT id, product_image, product_cat 
FROM products 
WHERE product_cat LIKE "Sale"';

if ($result = mysqli_query($connection, $viewquery)) {
    $images = mysqli_fetch_all($result, MYSQLI_NUM);
?>
    <div class="div-frame-five">
        <?php foreach ($images as list($id, $src, $cat)) { ?>
        <img src="/images/<?php echo $src; ?>" alt=""/>
        <?php } ?>
    </div> 
<?php 
    mysqli_free_result($result);
} 
?>

如果保存的图像已经确定尺寸并且尺寸未存储在数据库中，则还可以使用getimagesize()按图像大小对结果进行排序。

注意：

对于无法运行的脚本，应始终使用require 没有包含的资源
您可以使用require_once来防止创建数据库连接的多个实例
最佳做法是指定包含文件的完整路径，以避免include_path搜索该文件并减少歧义
建议在使用false之前先验证您的查询结果是否不是fetch
free_result是减少大型脚本/数据集上使用的内存的最佳实践
使用fetch_all将整个数据集检索到一个数组中，该数组使用更多的内存但速度更快

如果要调整物理图像的尺寸，可以使用GD extension来调整图像的尺寸。以下示例使用imagecopyresampled，并且仅适用于JPG图像。指定高度后，如果源图像不适合调整后的宽高比，则裁切部分的背景将为黑色。

 <?php 
 function jpg_thumbnail($src, $dest, $new_width, $new_height)
 {
    if (is_file($dest)) {
        //specified file already exists
        return;
        /* unlink($dest); //alternatively delete the file instead */
    }
    /* load the source image and retrieve its dimensions */
    $source_image = imagecreatefromjpeg($src);
    $width = imagesx($source_image);
    $height = imagesy($source_image);

    /* create a blank image with the desired dimensions */
    $new_image = imagecreatetruecolor($new_width, $new_height);

    /* copy the source image onto the blank image, using the desired dimensions */
    imagecopyresampled($new_image, $source_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

    /* save the new image as a new file */
    imagejpeg($new_image, $dest);
 }

 $i = 0;
 foreach ($images as list($id, $src, $cat)) {
     $desired_width = 132; //33% of 400px
     if (in_array(++$i, [1, 4], false)) {
        $desired_width = 264; //66% of 400px
     }
     $dest = '/images/' . $desired_width . '_' . $src;
     jpg_thumbnail(__DIR__ . '/images/' . $src, __DIR__ . $dest, $desired_width, 200);
     if ($i % 4 === 0) {
         /* reset $i back to 0 to implement groups of 4 */
         $i = 0;
     }
 ?>
    <img src="<?php echo $dest; ?>" alt=""/>
 <?php } ?>

如果需要更改其他图像格式，则需要确定图像扩展名和要使用的适当GD图像功能。

对于CSS，我更喜欢在:nth-child中使用重复模式来排列父级中的图像。

重复图案以4张图像（4n）为一组。其中图像2和3的宽度为33％，图像1和4的宽度为66％。因此，我们可以使用4n+x的模式来影响图像x的大小。

这种方法的弊端，或者是任何使用具有固定高度的可变宽度的方法，都是每个图像都必须具有正确的宽高比，否则图像将看起来被拉伸或挤压。

请参阅：https://jsfiddle.net/o73pdxhy/1/（或下面的运行摘录）

* {
  box-sizing: border-box;
}

/* set the container to only fit 2 images */
.div-frame-five {
  width: 400px;
  padding:0;
  margin: 0;
}

 /* set the spacing around each image - this reduces available image widths */
.div-frame-five img {
  margin: 2px;
}

/* define a set height for each image */
.div-frame-five img {
  height: 200px;
}

/* make images 1 and 4 in groups of 4 65% the width of div-frame-five */
.div-frame-five img:nth-child(4n+4),
.div-frame-five img:nth-child(4n+1) {
   width: 65%;
}

/* make images 3 and 2 in groups of 4 32% the width of div-frame-five */
.div-frame-five img:nth-child(4n+3),
.div-frame-five img:nth-child(4n+2) {
   width: 32%; 
}

<div class="div-frame-five">
  <img src="//placehold.it/300?text=Image1" />
  <img src="//placehold.it/300?text=Image2" />
  <img src="//placehold.it/300?text=Image3" />
  <img src="//placehold.it/300?text=Image4" />
  <img src="//placehold.it/300?text=Image5" />
  <img src="//placehold.it/300?text=Image6" />
  <img src="//placehold.it/300?text=Image7" />
  <img src="//placehold.it/300?text=Image8" />
</div>

这将继续以4组为一组的任意数量图像的图案。

如果要调整图案，请说出组中的第五张图像是宽度的100％。您可以将其更改为5n+x，并添加新的CSS规则img:nth-child(5n+5){ width: 100% }

如果要定义每个图像的尺寸，可以简单地使用:nth-child(#)。将#替换为要影响的图片位置。

例如：.div-frame-five img:nth-child(2)仅影响<div class="div-frame-five">中的第二张图像。

如上例所示，要考虑图像宽高比的不均衡。您需要使用包含图像作为背景的图像容器。

此方法的缺点是较大的图像将被裁切或裁切。容器。

请参见https://jsfiddle.net/3b4hsk79/（或下面的运行摘要）：

* {
  box-sizing: border-box;
}

/* set the container to only fit 2 images */
.div-frame-five {
  width: 400px;
  padding:0;
  margin: 0;
}

 /* set the spacing around each image */
.div-frame-five div {
  margin: 3px;
}

/* define a set height for each image */
.div-frame-five div {
  height: 200px;
  float: left;
}

/* make images 1 and 4 in groups of 4 65% the width of div-drame-five */
.div-frame-five div:nth-child(4n+4),
.div-frame-five div:nth-child(4n+1) {
   width: 65%;
}

/* make images 3 and 2 in groups of 4 32% the width of div-drame-five */
.div-frame-five div:nth-child(4n+3),
.div-frame-five div:nth-child(4n+2) {
   width: 32%; 
}

<div class="div-frame-five">
  <div style="background-image: url(//placehold.it/265?text=Image1);"></div>
  <div style="background-image: url(//placehold.it/265?text=Image2);"></div>
  <div style="background-image: url(//placehold.it/265?text=Image3);"></div>
  <div style="background-image: url(//placehold.it/265?text=Image4);"></div>  
</div>

显示来自TABLE的图像，其中每个图像的大小各不相同

3 个答案: