How to make all the images of different sizes the same height and width in a page?

Question

I used

<h1> Products </h1>
<div style="width:300px;height:300px;">
    <?php
    foreach( $result as $r)
    {
        echo "<div style='
        float: left;
        width:  300px;
        height: 300px;'>";
        echo "<img alt='Missing Picture' src='img/". $r['product_img_name'] . "'>";
        echo "<h2> Name: " . $r['product_name'] . " </h2>";
        echo "<p> Description:   " . $r['product_desc'] . "</p>";
        echo "<p> Price:  " . $r['price'] . "</p>";
    echo "</div>";
    }

but it gives me images that overlap and are too large or small.

Is there anything I can do to make all the different size images the same size and shape and in consistent order?

Answer 1

This problem is a bit more complicated than it seems, here is one way of approaching it.

First, define a div.inner container to hold the image and specify both a width and height value (100px for example).

Second, define a div.wrap container that will hold the div.inner block and then the h2 and p elements. You need to provide some vertical space for the text elements, so for example, give a height of 200px to div.wrap . You can then use float: left to create a grid pattern.

To get the images to scale either to the height or width (depending on the native aspect ratio of the image), apply max-height and max-width of 100% to the image.

Note that unless your images are exactly square (intrinsic height and width are the same), then you will have some extra white space either on the left and right edges of the image (in the case of portrait types images) or on the bottom edge (for landscape images).

 div.wrap { width: 100px; height: 200px; border: 1px solid blue; float: left; margin: 10px; } div.inner { width: 100px; height: 100px; text-align: center; } img { max-height: 100%; max-width: 100%; } h2 { font-size: 14px; margin: 5px; } p { font-size: 12px; margin: 5px; } 

 <div class="wrap"> <div class="inner"> <img src="http://placehold.it/300x300"> </div> <h2>Title Text</h2> <p>Some demo text goes here.</p> </div> <div class="wrap"> <div class="inner"> <img src="http://placehold.it/300x400"> </div> <h2>Title Text</h2> <p>Some demo text goes here.</p> </div> <div class="wrap"> <div class="inner"> <img src="http://placehold.it/400x300"> </div> <h2>Title Text</h2> <p>Some demo text goes here.</p> </div> 

Answer 2

You need to specify a width and a height on the image tag itself. Best practise is with a css style, but you can do it on the tag itself as well like this...

echo "<img style='width:300px;height:300px;' alt='Missing Picture' src='img/". $r['product_img_name'] . "'>";

If the original images are not square shaped then forcing the width and height to 300px will cause the images to be stretched which might not look so good.