在创建动态网格时防止div增长/拉伸

Question

我正在处理一个动态图像网格，无法将网格保留在容器中。这个想法很简单，使用jQuery向容器中添加我喜欢的任意多个框，在添加它们时，将它们缩小以适应容器，而不添加滚动条或从屏幕上运行。这与添加列有关，但当添加行时，它只会在屏幕底部运行。

如何修复容器div，以便在添加行时，图像缩小，而不是添加带滚动条的行？

function GenerateGrid(rows, cols) {
// Get the available space of the container.
var gridContainerH = $('#container').height();
var gridContainerW = $('#container').width();
// Adjust the image size to fit in the available space.
var imageWidth = gridContainerW / cols;
var imageHeight = gridContainerH / rows;
const container = document.getElementById("container");
var img = document.createElement("img");
img.src = "panel.jpg";
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
cell.innerHTML = '<img src=box.jpg width=' + imageWidth + ' height=' + imageHeight + '>';
container.appendChild(cell).className = "grid-item";
};
// Recalculate height
var panelHeight = imageWidth * rows;
$('#container').height(panelHeight);
$('#gridContainer').height(panelHeight);
};
// Start with a 5x7 grid
$(window).on("load", function() {
GenerateGrid(5, 7);
})
// If the column amount changes, rebuild the grid.
$('#columns').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows, columns);
});
// If the row amount changes, rebuild the grid.
$('#rows').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows, columns);
});

:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 0em;
grid-template-rows: repeat(var(--grid-rows), 0fr);
grid-template-columns: repeat(var(--grid-cols), 0fr);
}
#gridContainer {
width: 768px;
height: 600px;
max-height: 600px;
}
#staticContainer {
width: 768px;
height: 600px;
max-height: 600px;
}
.grid-item {
padding: 0em;
text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<form>
<label for="columns">Columns</label>
<input type="number" id="columns" name="columns" value="7">
<label for="rows">Rows</label>
<input type="number" id="rows" name="rows" value="5">
</form>
</div>
<div class="col-lg-10">
<div class="container" id="gridContainer">
<div class="row">
<div class="col-lg-8  text-center">
Horizontal label
</div>
</div>
<div class="row h-100">
<div class="col-lg-1 my-auto">
Vertical label
</div>
<div class="col-lg-7 staticContainer">
<div id="container"></div>
</div>
<div class="col-lg-4 mt-auto">
Right Side
</div>
</div>
</div>
</div>
</div>
</div>

为网格创建一个不会超过定义宽度和高度的Div容器涉及到什么？

编辑：请以图片为例。

5x7网格9x101x1

Answer 1

以避免注释中的链接：。这就是你想要做的吗？：

(结构修改+添加bs4类(

function GenerateGrid(rows, cols) {
// Get the available space of the container.
var gridContainerH = $('#container').height();
var gridContainerW = $('#container').width();
// Adjust the image size to fit in the available space.
var imageWidth = gridContainerW / cols;
var imageHeight = gridContainerH / rows;
const container = document.getElementById("container");
var img = document.createElement("img");
img.src = "panel.jpg";
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
cell.innerHTML = '<img src=box.jpg width=' + imageWidth + ' height=' + imageHeight + '>';
container.appendChild(cell).className = "grid-item";
};
// Recalculate height
var panelHeight = imageWidth * rows;
$('#container').height(panelHeight);
$('#gridContainer').height(panelHeight);
};
// Start with a 5x7 grid
$(window).on("load", function() {
GenerateGrid(5, 7);
})
// If the column amount changes, rebuild the grid.
$('#columns').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows, columns);
});
// If the row amount changes, rebuild the grid.
$('#rows').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows, columns);
});

:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
flex:1;
display: grid;
grid-gap: 0em;
grid-template-rows: repeat(var(--grid-rows), 0fr);
grid-template-columns: repeat(var(--grid-cols), 0fr);
}

#staticContainer {/* width sizing ? while col-lg-7 ? 
Added to parent  flex-shrink-0 flex-wrap classes but unsure of what you really want */ 
width: 768px;
height: 600px;
text-align:center;
}
.grid-item {
padding: 0em;
text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<form>
<label for="columns">Columns</label>
<input type="number" id="columns" name="columns" value="7">
<label for="rows">Rows</label>
<input type="number" id="rows" name="rows" value="5">
</form>
</div>
<div   class="col-lg-10 d-flex align-items-center flex-shrink-0 flex-wrap">
<div class="col-lg-1">Vertical label</div>
<div class="col-lg-7 d-flex flex-column" id="staticContainer">
<div>Horizontal label</div>
<div id="container"></div>
</div>
<div class="col-lg-4">
Right Side
</div>
</div>
</div>
</div>

使用具有断点和固定大小的类else-where会使预期的渲染非常混乱。。。你能澄清一下预期的尺寸和行为吗？

---

对象是否适合也是一个提示？

function GenerateGrid(rows, cols) {
// Get the available space of the container.
var gridContainerH = $('#container').height();
var gridContainerW = $('#container').width();
// Adjust the image size to fit in the available space.
var imageWidth = gridContainerW / cols;
var imageHeight = gridContainerH / rows;
const container = document.getElementById("container");
var img = document.createElement("img");
img.src = "http://dummyimage.com/100x200&text=panel.jpg";
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
cell.innerHTML = '<img src="http://dummyimage.com/100x200&text=box.jpg" width=' + imageWidth + ' height=' + imageHeight + '>';
container.appendChild(cell).className = "grid-item";
};
// Recalculate height
var panelHeight = imageWidth * rows;
$('#container').height(panelHeight);
$('#gridContainer').height(panelHeight);
};
// Start with a 5x7 grid
$(window).on("load", function() {
GenerateGrid(5, 7);
})
// If the column amount changes, rebuild the grid.
$('#columns').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows, columns);
});
// If the row amount changes, rebuild the grid.
$('#rows').change(function() {
var columns = $("#columns").val();
var rows = $("#rows").val();
$('#container').empty();
GenerateGrid(rows, columns);
});

:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
flex:1;
display: grid;
grid-gap: 0em;
grid-template-rows: repeat(var(--grid-rows), 0fr);
grid-template-columns: repeat(var(--grid-cols), 0fr);
}

#staticContainer {/* width sizing ? while col-lg-7 ? 
Added to parent  flex-shrink-0 flex-wrap classes but unsure of what you really want */ 
width: 768px;
height: 600px;
text-align:center;
}
.grid-item {
padding: 0em;
text-align: center;
}
.grid-item img {object-fit:cover;display:block}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<form>
<label for="columns">Columns</label>
<input type="number" id="columns" name="columns" value="7">
<label for="rows">Rows</label>
<input type="number" id="rows" name="rows" value="5">
</form>
</div>
<div   class="col-lg-10 d-flex align-items-center flex-shrink-0 flex-wrap">
<div class="col-lg-1">Vertical label</div>
<div class="col-lg-7 d-flex flex-column" id="staticContainer">
<div>Horizontal label</div>
<div id="container"></div>
</div>
<div class="col-lg-4">
Right Side
</div>
</div>
</div>
</div>