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

Question

我有一排图片和产品说明。它看起来像这样：

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

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

1. 我事先不知道图像的尺寸，这些是通过 AJAX 从我的数据库中调用的
2. 我不想要 javascript 解决方案，我更喜欢基于 CSS 的解决方案。
3. 我正在使用Bootstrap，如果这有任何影响的话。
4. 这是使用 AngularJS 的ng-repeat 构建的，其中一个repeat 等于一个“产品”，如上图所示。因此，创建一个包含图像行的<tr> 并简单地给它们vertical-align="middle" 在这里不起作用。

由于最后一个因素，我假设没有 javascript 就不可能做到这一点。这是一个 JSFiddle，里面有代码：

http://jsfiddle.net/CTVZR/5/

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

Answer 1

您可以使用table 和table-cell display。

jsFiddle Demo

.row {
    display: table;
}
.col-xs-4
{
    display: table-cell;
    float: none;
    vertical-align: bottom;
}

Answer 2

html 解决方案：对于大多数情况来说不是最好的，但很简单 您可以在 img 标签中设置高度或宽度（或两者），以便它们都相同 前任： 所有图像将按比例调整为 heigth="100px" （如果你设置了宽度和高度，那么你会失去自动比例）

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

例如： 背景：url('the url') 不重复中心； 看链接：http://www.w3schools.com/cssref/pr_background-position.asp

CSS 3 解决方案 尝试使用图像最小高度和最小宽度（可能还有最大）

Answer 3

我想到的最简单的解决方案是给height 一个特定的值和position:relative，并给其中的图像position:absolute、bottom:0 和max-height 与容器的高度相同。试试看吧。

Answer 4

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

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

http://jsfiddle.net/toniweb/CTVZR/14/

-编辑，对齐底部图像-

$(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);
        }
    });

});

http://jsfiddle.net/toniweb/CTVZR/16/

-编辑，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);