保持每个不同图像尺寸的Div尺寸相同？

Question

我正在使用Gallery网页，我在本地服务器中存储了不同大小的图像。我想要的是让我的画廊看起来像这样。简单地说我想保持所有图像尺寸的分区大小相同。图像也应覆盖整个区域。

我尝试了什么

我想使用PHP来获取图像位置并执行此任务。所以我将粘贴PHP文件。

<?php
$itemNum =$_POST["itemNum"] ;
$folderName = $_POST["folderName"];

echo '<div class="col-md-4 mix category-a" style="margin:10px;height:300px;width:400px">
                <div class="single-portfolio" style="height:300px;width:400px;overflow: hidden;">
                    <a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive"  src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
                </div>
            </div>';
die();
?>?>

我的问题

此代码不能满足我的要求。我尽我所能地尝试使这成为可能。有人可以帮助我得到我想要的东西吗？感谢。

修改

这就是我得到的。可以看到尺寸根据图像尺寸而变化

Answer 1

设置div的最大高度和最大宽度，并固定图像的高度：

<div class="single-portfolio" style="max-height:300px;max-width:400px;overflow: hidden;">

<img style="height:300px;width:400px;" class="img-responsive"  src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" />

Answer 2

你所要做的就是玩css，它很容易申请。你有固定的图像高度，即400px。

所以div的css将是

.category-a {
  height: 400px;
}

.img-responsive {
    display: block;
    max-width: 90%;
    max-height: 400px;
    margin: 0 auto;
}

你的HTML就是这样的。请不要使用内联css作为这样使用的总是不好的做法。而是使用类。

<div class="col-md-4 mix category-a">
                <div class="single-portfolio">
                    <a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive"  src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
                </div>
            </div>