显示来自TABLE的具有不同尺寸的图像

Question

I have this plan on my design to fetch all the images from table and to resize the images in any sizes individually. So the classnames are the key to change the sizes. How can I display it with different sizes?

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>';

Example

Answer 1

You can format you images using css, using your classes. For example -

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
}

see https://jsfiddle.net/5ry7dLug/10/

Answer 2

This will iterate through you result set and and alternate your img width between 66% and 33%. There are many other ways to go about this but this will probably be the simplest approach for now.

Try this:

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

From what I gather from the comments, you are looking for both how to iterate and display the images in the example pattern. If you are looking to set the dimensions of the images from the database, you would need to change your table to include the image dimensions.

First in order to retrieve and iterate over each of the images in the database. You can use the following.

Example: 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);
} 
?>

You can also sort the results by the size of the images, using getimagesize() , if the saved images are already sized and the dimensions are not stored in the database.

Notes:

• You should always use require for scripts that can not function without the included resource
• You can use require_once to prevent multiple instances of the database connection from being created
• It is best-practice to specify the full path to the include file to avoid the include_path from searching for it and reduce ambiguity
• it is recommended to validate your query results are not false before using fetch
• free_result is a best-practice to reduce the memory used on larger scripts/datasets
• using fetch_all retrieves the entire dataset into a single array, which uses more memory but is faster

---

If you are wanting to resize the physical image dimensions, you can use the GD extension to achieve a resized image. The below example uses imagecopyresampled and only works with JPG images. When a height is specified, if the source image does not fit the resized aspect ratio, the background of the cropped portions will be black.

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

If you need to alter other image formats, you will need to determine the image extension and the appropriate GD image functions to use.

---

For the CSS, I prefer to use a repeating pattern for the arrangement of the images in the parent with :nth-child .

The repeating pattern is in groups of 4 images ( 4n ). Where images 2 and 3 are 33% width and images 1 and 4 are 66% of the width. So we can use the pattern of 4n+x to affect the size of image x .

The downside to this approach, or any that uses altering widths with a set height, is that each image must be the correct aspect ratio or the image will appear to be stretched or pinched.

See: https://jsfiddle.net/o73pdxhy/1/ (or Run Snippet below)

 * { 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> 

This will continue the pattern for any number of images in groups of 4.

If you want to adjust the pattern, say where the 5th image in the groups is 100% of the width. you can change it to 5n+x and add a new css rule of img:nth-child(5n+5){ width: 100% }

If you want to define the dimensions of each individual image, you can simply use :nth-child(#) . Replacing # with the image placement to affect.

For example: .div-frame-five img:nth-child(2) will affect only the second image in the <div class="div-frame-five"> .

---

To account for the disproportionation of the image aspect ratios, as seen in the previous example. You would need to use image containers that include the images as backgrounds.

The downside of this approach is that larger images will be cut off or cropped by the container.

See https://jsfiddle.net/3b4hsk79/ (or run snippet below):

 * { 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>