随着添加/删除更多缩略图以适应其父DIV，缩略图的高度会动态变化

Question

我已经查看了所有建议的文章，它们似乎解决了我想做的事情。我需要的不是动态的"div"，而是固定大小的容器，并根据内容的数量调整容器的高度以适应div。我需要它来处理图像，而不是文本。

特别是，我有一个div，它包含wordpress站点"singlepage"上一篇文章的thumbail。我希望用户能够添加20个缩略图，或者10个，或者100个。但无论添加多少，thumrails的高度都会进行调整，以便它们都适合预先定义的"div"。

所以，换句话说，我需要缩略图的高度是包含div的高度的百分比，除以thumbail的数量。。。我认为

示例照片包括效果的前后im寻找：我已经在使用jquery做一些悬停动画，所以已经建立了一个脚本框架。我只是不知道如何开始做这样的事情。

谢谢！

Answer 1

这里有一个代码，它将修改每个图像的高度，使所有高度的总和成为所需的cotainer高度：

// all image tags inside the container
var images = $('#container').find('img');
// desired height of the container (you can use also data- attribute)
var height = 400;
images.each(function() {
    // let's say 600 is the original width of the image
    $(this).css('width', '600px');
    // modify height of the image
    $(this).css('height', height / images.length + 'px');
});

HERE是一个支持添加/删除并使用自定义事件的工作示例。

Answer 2

您也可以使用css3-flexbox在没有javascript的情况下实现这一点，但只有Webkit浏览器和Firefox支持这些功能。你的css看起来像：

#container {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  height: 500px;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
#container div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

下面是一个例子http://jsfiddle.net/NtVTY/（javascript只是为了举例说明）。

但是，唉，我不建议使用它，它只是一个编码练习：）