javascript - HTML/CSS to make an image container the same size as those next to it

Question

I have a row of images and product descriptions. It looks like this:

The image on the right obviously has a smaller height than the two preceding it. I'd like to make it look more like this:

But I'm at a bit of a loss as to how. Here are the caveats:

1. I don't know the dimensions of the images in advance, these are being called in via AJAX from my database
2. I don't want a javascript solution, I'd much much prefer a CSS-based solution.
3. I'm using Bootstrap, if that has any bearing here.
4. This is built using AngularJS' ng-repeat where one repeat equals one 'product', as in the images above. Thus creating a <tr> which contains the row of images and simply giving them vertical-align="middle" won't work here.

Because of the last factor, I'm assuming it won't be possible to do this without javascript. Here's a JSFiddle which has the code inside:

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

Any ideas/solutions? I'd gladly display them in a table if it were possible but I can't think of a way how.

Answer 1

您可以使用table和table-cell 显示.

jsFiddle Demo

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

Answer 2

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

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

例如： background: url('the url') no-repeat center; 看链接：http ://www.w3schools.com/cssref/pr_background-position.asp

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

Answer 3

使用 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);

Answer 4

我会想到的最简单的解决方案是给出height一个特定的值，position:relative并且它们里面的图像给出position:absolute，bottom:0并且max-height与容器的高度相同。试试看。