如何在頁面中使所有大小不同的圖像具有相同的高度和寬度？

Question

我用了

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

但它會給我重疊的圖像，太大或太小。

我能做些什么來使所有不同大小的圖像具有相同的大小和形狀，並保持一致的順序？

Answer 1

這個問題比看起來要復雜一些，這是解決問題的一種方法。

首先，定義一個div.inner容器來保存圖像並指定寬度和高度值（例如100px）。

其次，定義一個div.wrap容器，該容器將容納div.inner塊，然后容納h2和p元素。 您需要為文本元素提供一些垂直空間，例如，將div.wrap的高度設置為200px。 然后，您可以使用float: left創建網格圖案。

若要使圖像縮放到高度或寬度（取決於圖像的原始長寬比），請對圖像應用max-height和max-width 100％。

請注意，除非您的圖像是完全正方形的（內部高度和寬度相同），否則圖像的左右邊緣（對於縱向類型的圖像）或底邊緣將有一些額外的空白（用於風景圖像）。

 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

您需要在圖片標簽本身上指定寬度和高度。 最佳做法是使用CSS樣式，但您也可以像這樣在標簽本身上進行操作...

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

如果原始圖像不是正方形，則將寬度和高度強制設置為300px將導致圖像拉伸，效果可能不太好。