Question

我有一张表，根据用户输入可能包含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>

Answer 1

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

使用此示例

See a demo：

<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>

Answer 2

是的，您可以使用css media query在每个断点上调整图像大小例如在屏幕尺寸500px上制作img尺寸为100px

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

如何在表格中制作图像动态地符合浏览器的大小？

2 个答案: