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

Question

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

具体来说，我有一个 div，其中包含 wordpress 网站“单页”上帖子的缩略图。我希望用户能够添加 20 个缩略图，或者 10 个，或者 100 个。但无论他们添加多少，缩略图的高度都会调整，以便它们都适合预定义的“div”。

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

示例照片包括我正在寻找的效果前后:我已经在使用 jquery 来制作一些悬停动画，因此已经设置了一个脚本框架。我只是不知道如何开始做这样的事情。

谢谢!

Answer 1

这是一个代码，可以修改每个图像的高度，使所有高度的总和成为容器所需的高度:

// 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 是一个支持添加/删除和使用自定义事件的工作示例。