使用javascript按行和列动态调整大小的图像网格

编程问答 2022-08-17

问题描述

很抱歉，这是我最初的问题的更新，因为它试图使动态图像网格更加清晰。

我试图通过指定列和行的数量来制作动态图像网格。例如，一个5x5的网格应具有25张图像。更改为6x6将具有36张图像。随着行或列的更改，图像数量应使用jquery实时更改，但应保留在原始容器中，而无需添加滚动条。要做到这一点，需要在容器中按比例缩小图像。

下面是没有缩放的情况。

<script type="text/javascript">

 function GenerateGrid() {

 var columns = $("#columns").val();
 var rows = $("#rows").val();
 var table = document.createElement("TABLE");

   for (var i = 0; i < rows; i++) {
    row = table.insertRow(-1);
      for (var j = 0; j < columns; j++) {
        var cell = row.insertCell(-1);
        // smile.png is a 200x200 smile image,anything will do.
        cell.innerHTML = "<img src=smile.png>";
        count++;
      }
   count++;
  }

 var dynamicTable = document.getElementById("grid");
 dynamicTable.innerHTML = "";
 dynamicTable.appendChild(table);
 }

我需要的是按比例缩小的图像，以始终填充相同的空间。因此，在1x1网格中包含1张图像的图像将比在100x图像中10x10网格中的图像更大。

我使用表来完成这项工作，但是我认为使它起作用的正确方法是使用divs。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dynamicimageimagejavascriptjquery