Javascript JS/jQuery适合div中的所有图像（不带空格）

我有一个

div

称之为

#container

， 在这个

#容器内

我有

n

数量的

img

标签称之为

图像

n

可以是2、10、40等等。 我想知道如何将

n

数量的

图像

放入

#容器中

以关闭所有空白

拉伸图像。质量不重要
这就是我一直尝试的：

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);
});

然后制作一个名为“拉伸”的css元素，定义宽度：100%

高度：100%，如果需要定义布局，即相对布局，首先，即使在保持图像纵横比的情况下，也可以实现您所需的内容-但是将计算行高，但这不是一项简单的任务（至少不像单行公式那么简单）

我开发了一个名为的jQuery插件。我相信这个插件正是你所需要的


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

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

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


itemSpacing—图像之间的间距（以像素为单位）
justifyLastRow-如果为true，则最后一行中的图像将被拉伸以获取该行的全宽
idealRowHeight—所需的行高度（以像素为单位）。插件将尽最大努力安排项目，使行高度尽可能接近此值
GitHub上记录了更多选项

除了计算图像的正确宽度和高度之外，还需要考虑图像之间的空白。默认情况下，图像是内联块，这意味着它们的行为类似于文字，文字之间确实有一些空白，对吗？使其
显示：block；浮动：左或使用Flex框布局来清除空白。插件使用
float:left。
我创建了一些您可能感兴趣的东西

var container = $('#container');
var height = container.outerHeight();
var width = container.outerWidth();

function populate(n){
    var rem_items = n;
    var rows = Math.round(Math.sqrt(n));
    var row_items = Math.ceil(n/rows);

    for (var i=0; i<rows; i++){

        // this prevents us from generating a lonely single box in a row
        if( (rem_items%(rows-i))===0 ){
            row_items = rem_items/(rows-i);
        }

        if(rem_items<row_items){
            row_items = rem_items;
        }

        rem_items = rem_items-row_items;

        for (var j=0; j<row_items; j++){
            var img_height = height/rows;
            var img_width = width/row_items;
            var img_left = j*img_width;
            var img_top = i*img_height;
            var img = $('<div class="cell"></div>');
            img.css({
                width: img_width,
                height: img_height,
                left: img_left,
                top: img_top
            });
            container.append(img);
        }
    }
}

populate(40);

var-container=$（'#container'）；
var height=container.outerHeight（）；
var width=container.outerWidth（）；
函数填充（n）{
var rem_项目=n；
var rows=Math.round（Math.sqrt（n））；
var row_items=Math.ceil（n行）；
对于（var i=0；我想让它们排成一行吗？这可能会有帮助：底部的200、130和230是多少？@juallom不知道，所以它们适合整个
#容器beging@Roberto我试过了，但是它们没有填满整个容器。<它们仍然留有一些空间。如果你的元素少于2-3个，也不会填满。我知道ed只是一些公式<关于如何计算<代码>图像的宽度和高度
将对此进行检查！谢谢你，但在应用此公式之前，我需要根据容器的宽度和高度调整它们的大小。因此，它们适合容器，而不留空白！@Froxz，是的，我现在明白了-如果你想让它成为一个公共空间，这不是一项简单的任务我为一个画廊制作了一个jQuery插件，看起来像这样（这个页面使用了我的插件）。空白是可配置的，图像完全符合行，其宽度/高度比保持不变。我可以在晚上分享详细信息-目前没有足够的时间来描述它。请回答，如果这是您正在寻找的。我会看一看，但正如我在底部看到的，您仍然缺少2张图片。@Froxz，说得好然而，这是预期的行为-我希望最后一行是这样的-你可以改变它，使所有的行都完全伸展。只需准备一堂数学课；）。或者我可以分享整个插件，但我必须清理它-是在几年前匆忙开发的，非常混乱。我希望你会分享你的代码，当你有时间）)))不幸的是没有帮助。我将尝试更改您的代码
var container = $('#container');
var height = container.outerHeight();
var width = container.outerWidth();

function populate(n){
    var rem_items = n;
    var rows = Math.round(Math.sqrt(n));
    var row_items = Math.ceil(n/rows);

    for (var i=0; i<rows; i++){

        // this prevents us from generating a lonely single box in a row
        if( (rem_items%(rows-i))===0 ){
            row_items = rem_items/(rows-i);
        }

        if(rem_items<row_items){
            row_items = rem_items;
        }

        rem_items = rem_items-row_items;

        for (var j=0; j<row_items; j++){
            var img_height = height/rows;
            var img_width = width/row_items;
            var img_left = j*img_width;
            var img_top = i*img_height;
            var img = $('<div class="cell"></div>');
            img.css({
                width: img_width,
                height: img_height,
                left: img_left,
                top: img_top
            });
            container.append(img);
        }
    }
}

populate(40);