JS/jQuery适合div中的所有图像(没有空格)

Question

我有一个div电话呢#container,在这里#container我有n大量的img标签叫它images n可以是2,10,40等等.我想知道我怎么能适应n的量images内#container关闭所有空格stretch图像.质量无所谓这是我到现在为止所尝试的:

var amount = $("#container > img").length;
var amount_w = amount*200; //200 width of 1 image 
var amount_h = amount*130; //120 height  image 
var refH = $("#container").height();
var refW = $("#container").width();

var refRatio = refW/refH;
$("#container img").each(function(){
     $(this).height((amount_h-130)-refH);
     $(this).width((amount_w-230)-refW);
});

Answer 1

首先，即使在保持图像的宽高比的同时，也可以实现您所需要的- 但是行高将被计算，但这不是一个微不足道的任务（嗯，至少不像单行公式那么微不足道） ）。

我开发了一个名为jPictura的 jQuery 插件。我相信该插件完全可以满足您的需求。

这是一个工作小提琴。

您可以在GitHub上找到插件源代码和文档。

如何使用该插件的简单示例：

$(document).ready(function () {
    $('#my-gallery').jpictura({
        layout: { itemSpacing: 0, justifyLastRow: true, idealRowHeight: 200}
    });
});

• itemSpacing - 图像之间的空间量（以像素为单位）
• justifyLastRow - 如果为 true，最后一行中的图像将被拉伸以占据该行的整个宽度
• IdealRowHeight - 所需的行高度（以像素为单位）。该插件将尽力排列项目，使行高尽可能接近该值。
• GitHub 上记录了更多选项

除了计算图像正确宽度和高度的 JS 内容之外，关于图像之间的空白空间还需要考虑一件事。图像默认是内联块，这意味着它们的行为就像单词一样，并且单词之间确实有一些空白，对吧？制作它们display: block; float: left;或使用弹性框布局来消除空白。该插件float: left;默认使用。