Javascript HTML/CSS使图像容器与旁边的图像容器大小相同

我有一排图片和产品描述。看起来是这样的：

右边的图像明显比前面两个图像的高度小。我想让它看起来更像这样：

但我有点不知道该怎么做。以下是注意事项：

我事先不知道图像的尺寸，它们是通过AJAX从我的数据库中调用的

我不想要javascript解决方案，我更喜欢基于CSS的解决方案

我正在使用

引导

，如果这与这里有任何关系的话

这是使用AngularJS'

ng repeat

构建的，其中一个

repeat

等于一个“产品”，如上图所示。因此，创建一个包含图像行的

，并简单地给它们

vertical align=“middle”

在这里不起作用

由于最后一个因素，我假设没有javascript是不可能做到这一点的。下面是一个JSFIDLE，其中包含代码：

---

有什么想法/解决方案吗？如果可能的话，我很乐意将它们显示在表格中，但我想不出一种方法。

您可以使用

表格

和

表格单元格

---

对于JS，您需要循环检查最高值，并将此值应用于其他值

$(document).ready(function(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        if($(this).height() > maxHeight){
            maxHeight = $(this).height();
        }
    });
    $('.searchImgContainer').css('height',maxHeight);
});

-编辑，对齐底部图像-

$(document).ready(function(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight > maxHeight){
            maxHeight = currentHeight;
        }
    });
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight < maxHeight){
              margin = maxHeight - currentHeight; $(this).find('img').css('marginTop',margin);
        }
    });

});

$（文档）.ready（函数（）{
var maxHeight=0；
$（'.searchImgContainer'）。每个（函数（）{
currentHeight=$（this）.height（）；
如果（当前高度>最大高度）{
最大高度=当前高度；
}
});
$（'.searchImgContainer'）。每个（函数（）{
currentHeight=$（this）.height（）；
if（当前高度<最大高度）{
margin=maxHeight-currentHeight；$（this）.find（'img'）.css（'marginTop'，margin）；
}
});
});

-编辑，Itay让我工作！^^-

function fixImages(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight > maxHeight){
            maxHeight = currentHeight;
        }
    });
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight < maxHeight){
              margin = maxHeight - currentHeight; $(this).find('img').css('marginTop',margin);
        }
    });
}

$(document).ready(fixImages);
$(window).resize(fixImages);

函数fixImages（）{ var maxHeight=0； $（'.searchImgContainer'）。每个（函数（）{ currentHeight=$（this）.height（）； 如果（当前高度>最大高度）{ 最大高度=当前高度； } }); $（'.searchImgContainer'）。每个（函数（）{ currentHeight=$（this）.height（）； if（当前高度<最大高度）{ margin=maxHeight-currentHeight；$（this）.find（'img'）.css（'marginTop'，margin）； } }); } $（文档）.ready（修复图像）； $（窗口）。调整大小（固定图像）；

---

我想到的最简单的解决方案是给

高度

一个特定的值和

位置：相对

，对其中的图像，给

位置：绝对

，

底部：0

和

最大高度

与容器的高度相同。试一试。

html解决方案：对大多数CAE来说不是最好的，但很简单 您可以在img标记中设置高度或宽度（或两者），使它们都相同 前任： 所有图像的大小将按比例调整为heigth=“100px” （如果设置了宽度和高度，则将丢失自动比例）

CSS解决方案-背景 使用div代替img标记，并将其背景设置为所需的图像。 您可以将位置设置为中心或百分比或像素。您可以设置缩放

例： 背景：url（“url”）无重复中心； 请看链接：

css3解决方案

---

尝试使用图像最小高度和最小宽度（可能还有最大值）

css最小高度属性在这里可能有用（在旧版本的IE中不起作用）嗨，我编辑了我的答案；过来看！别忘了让它粘到底部。也可以附加resize事件，因为它很灵活。这很接近，但是

垂直对齐：底部

没有显示我在问题中的提问方式。图像应该是相同的高度，而底部的文本可以是任何高度（因为根据产品的不同，会显示不同数量的单词）。@Jascination我想不出一种不使用JS就可以在当前HTML结构中实现这一点的方法。

function fixImages(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight > maxHeight){
            maxHeight = currentHeight;
        }
    });
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight < maxHeight){
              margin = maxHeight - currentHeight; $(this).find('img').css('marginTop',margin);
        }
    });
}

$(document).ready(fixImages);
$(window).resize(fixImages);