如何在页面中使所有大小不同的图像具有相同的高度和宽度？

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将导致图像拉伸，效果可能不太好。