Question

我正在尝试创建一个包含不同宽度图像的图库：

<div style="width: 900px;">

<div class="row">
<div class="col-xs-2"><img src="http://placehold.it/350x350" class="img-responsive"></div>
<div class="col-xs-4"><img src="http://placehold.it/700x350" class="img-responsive"></div>
<div class="col-xs-2"><img src="http://placehold.it/350x350" class="img-responsive"></div>
<div class="col-xs-2"><img src="http://placehold.it/350x350" class="img-responsive"></div>
<div class="col-xs-2"><img src="http://placehold.it/350x350" class="img-responsive"></div>
</div>

</div>

因此，因为它们具有响应性，所以第二张图像高于其他图像。是否有一种简单的方法可以在第二张图像上进行overflow: hidden;，从而使其与其他图像的高度相同？这样图像不会扭曲，只是在底部切断。

这是一个小提琴：http://jsfiddle.net/2z1daLwt/

Answer 1

为了让overflow:hidden起作用，您必须将容器设置为固定或百分比高度，但您不希望显然对各种高度和响应图像执行此操作。这是jQuery解决方案。

http://jsfiddle.net/grpydj1f/

$(document).ready(function () {
    var min = Infinity;
    $els = $('.row > div > img');
    $els.each(function () {
        min = Math.min($(this).height());
    });
    //alert(min);
    $els.parent('div').css({
        'height': min,
        'overflow': 'hidden'
    });
});

Answer 2

具有不同的高度并且具有自举流程并不真正起作用看看 this same question 哪里有一些方法可以做到这一点在我的帖子中，我展示了一些您可以使用的选项。看看我的小提琴并调整窗口大小以查看最适合您的选项我希望这可以帮到你。

Answer 3

当您使用 .img-responsive 类时，这会应用 max-width：100％;身高：自动;并显示：阻止; 到每个图像，以便它可以很好地缩放到父元素。如果您希望所有图像具有相同的高度，则必须使用CSS为所有图像设置height属性的静态值，或者将其直接添加到图像标记。

Bootstrap：即使它们不是，我如何将响应图像保持相同的高度？

3 个答案: