如何解决使用javascript按行和列动态调整大小的图像网格
很抱歉,这是我最初的问题的更新,因为它试图使动态图像网格更加清晰。
我试图通过指定列和行的数量来制作动态图像网格。例如,一个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 举报,一经查实,本站将立刻删除。