javascript - 如何根据用户输入调整图像大小以防止在网页上溢出

Question

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

有没有办法动态调整图像大小而不需要滚动？

它看起来像什么

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

假设您的表格占据屏幕的 100% 高度

var totalHeight = window.innerHeight,
imgLen = $('table img').length;

然后$('table img').height(totalHeight/imgLen + 'px');