Html 如何使表格中的图像动态适应浏览器的大小？

我有一个表，它可以包含1到12个图像，具体取决于用户输入。如果有一个图像，那么它会很好地显示在表中。但是，如果有12个图像，它将垂直向下延伸，直到我需要向下滚动以查看其余的图像

有没有一种方法可以动态调整图像的大小，这样就不需要滚动，并且所有内容都可以放入表格中

它看起来像什么

5张图片：

12幅图片：

这是我的当前表，我使用JavaScript填充图像：

<table id="first">
            <tr>
                <td>
                    <ul>
                        <li><img id="firstL1"></li>
                        <li><img id="firstL2"></li>
                        <li><img id="firstL3"></li>
                        <li><img id="firstL4"></li>
                        <li><img id="firstL5"></li>
                        <li><img id="firstL6"></li>
                        <li><img id="firstL7"></li>
                        <li><img id="firstL8"></li>
                        <li><img id="firstL9"></li>
                        <li><img id="firstL10"></li>
                        <li><img id="firstL11"></li>
                        <li><img id="firstL12"></li>
                    </ul>
                </td>
                <td><ul></ul></td>
                <td>
                    <ul>
                        <li><img id="firstR1"></li>
                        <li><img id="firstR2"></li>
                        <li><img id="firstR3"></li>
                        <li><img id="firstR4"></li>
                        <li><img id="firstR5"></li>
                        <li><img id="firstR6"></li>
                        <li><img id="firstR7"></li>
                        <li><img id="firstR8"></li>
                        <li><img id="firstR9"></li>
                        <li><img id="firstR10"></li>
                        <li><img id="firstR11"></li>
                        <li><img id="firstR12"></li>
                    </ul>
                </td>
            </tr>
        </table>

您可以设置图像本身的百分比宽度。宽度为100%的图像将展开以适合父表单元格，即使该表单元格根据视口大小和其他表单元格的大小动态调整大小

在这个例子中：

<table>
    <tr>
        <td><img src="http://lorempixel.com/640/480" style="width:100%"></td>
        <td><img src="http://lorempixel.com/320/240" style="width:100%"></td>
        <td><img src="http://lorempixel.com/640/480" style="width:100%"></td>
    </tr>
</table>

---

是，您可以使用

css媒体查询

在每个断点上调整图像大小 例如，屏幕尺寸为500px，img尺寸为100px

@media only screen and (max-width: 500px) {
    img {
        width: 100px;
    }
}

---

我试着用百分比来设计宽度和高度的样式，但它仍然向下延伸。我想我误解了你的问题：）你能画一个你希望12幅图像如何显示的草图吗？你想让额外的列水平扩展吗？基本上，如果有12个图像，有没有办法将它们全部压缩到表中，使其看起来像有5个图像的一个，而不是垂直向下扩展？你能尝试img{max width:100%；width:100%；}仍然向下扩展吗。