按比例增加/减少包装

Question

演示

HTML ...

<div id="main">
    <table>
        <tr>
            <td><img src="" width="200" height="100" /></td>
            <td>
                <img src="" width="50" height="30" />
                <img src="" width="50" height="30" />
                <img src="" width="50" height="30" />
            </td>
            <td><img src="" width="100" height="100" /></td>
        </tr>
        <tr>
            <td style="color: blue; background-color: yellow;">some text here</td>
            <td colspan=2 style="color: white; background-color: blue;">next goes here</td>
        </tr>
    </table>
</div>

三网融合

img{
    background-color: red;
    display: block;
    border: 2px solid white;
}

我尝试过的:

#main table{
    width: 200px;
    display: table;
    table-layout: fixed;
}

演示

我想要的是这里:

原始尺寸:

当我重新调整主要大小时:

Answer 1

#main table{
 display: table;
table-layout: fixed;

}

删除宽度：200px；图像尺寸比 TD 的尺寸大，因此它会超出屏幕