Question

我正在尝试创建一种马赛克图像库，但我希望它能够处理任何类型的图像尺寸*。我将每行定义为n个图像，这些图像的宽度都相等。

*所有原始图像尺寸至少为父div宽度除以n

的宽度

例如，我有一排3张图片，因此每张图片占据父div的33％。这些图像的高度不会被定义为保持纵横比，但我希望父div获取最短孩子的高度，而不是最高的孩子，以避免在较短的图像下面的空白。我并不担心这里的奇怪裁剪，因为点击图像实际上会链接到完整大小的图像。

<div>
   <img style="width:33%">
   <img style="width:33%">
   <img style="width:33%">
</div>

示例：http://jsfiddle.net/wf338/

在那个例子中，我希望包装div的高度取中间w3Schools图像的高度，切掉其他2个图像的底部。然后随着浏览器宽度的变化，无论多窄，宽度将继续保持33％，高度将自动改变以保持宽高比，但图像下方永远不会有空间。

Answer 1

检查出来：

HTML：

<div style="width:100%;background:red;overflow:hidden;" id="container">
    <img src="http://numenta.org/images/stackoverflow.png" style="background:yellow;" id="1"/><!--
        --><img src="http://www.userlogos.org/files/logos/Rog/w3schools.com_03.png" style="background:green;" id="2"/><!--
        --><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" style="background:blue;" id="3"/>
</div>

CSS：

img {
    width: 33%;
    vertical-align: top;
}

JQuery的：

$(function(){
var heights = [];
heights.push($('#1').height());
heights.push($('#2').height());
heights.push($('#3').height());
var min_height = Math.min.apply(Math,heights); 
    $('#container').height(min_height);
});

小提琴：http://jsfiddle.net/wf338/

如果您不知道图像高度，我没有看到没有jquery的解决方案。如果你知道，你可以设置最低img的高度，不要使用jquery。

你如何让div占据最短孩子的身高？

1 个答案: