无论大小如何，创建均匀分布的图像答案

【问题标题】：Creating evenly spaced images regardless of size无论大小如何，创建均匀分布的图像
【发布时间】：2013-09-08 20:04:06
【问题描述】：

我正在制作一个照片库，其中所有图像都从 MySQL 数据库中提取并使用echo ('<div class="photo"> <img src="' . $row['name'] . '" /> </div>'); 显示在页面上。我试图让图像适合固定宽度的容器，并让它们全部均匀分布，如 here 所示。我一直有这个问题，图像垂直间隔不均匀。有人可以帮我解决这个问题吗？我已经包含了我的来源。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style1.css">
    </head>

<body>
    <div class="container">
<?php
require 'DB.php';



    try{      
    $stmt ='SELECT * FROM victoria';
    foreach ($conn->query($stmt) as $row)
        {
        echo ('<div class="photo"> <img src="' . $row['name'] . '" /> </div>');
        }
    }  catch (PDOException $e){
        echo 'Connection failed: ' . $e->getMessage();
    }


?>
    </div>

</body>

</html>

CSS

body{
    background-color: #013FF0;
}

.container {
    width: 1000px;
    background-color: #000000;
    text-align: center;

}

.photo{
    width: 300px;
    height: 300px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
}

.photo img{

    width: 250px;
    height: auto;

}

【问题讨论】：

请发布呈现的 HTML，而不是 PHP，因为 PHP 在这里无关紧要。此外，一个 jsFiddle 会有所帮助。

标签： html css

【解决方案1】：

将line-height: 300px; 和vertical-align: middle; 添加到.photo：

.photo {
    width: 300px;
    height: 300px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
    text-align: center;
    line-height: 300px;
}

.photo img {
    vertical-align: middle;
}

这是一个工作示例：http://jsfiddle.net/QXGuH/。

【讨论】：

对不起，请重试。
很好，帮了很多忙，但是如果我希望它们在一个网格中，以便所有图像都具有相同的大小，我将如何使图像约束到某个尺寸而不扭曲原来的我想将图像放入 100 像素 x 100 像素的框内
我建议用 PHP 制作图标并将它们存储在服务器上。使用 CSS 调整图像大小是一种不好的做法。但是你可以尝试使用max-width和max-height。