考虑以下代码。如何以响应方式实现表格，以便在大屏幕上表格高度和宽度等于图像(例如 600x600)的总和，而在移动设备等较小的屏幕上表格按比例缩小图像。例如，在屏幕宽度为 320 像素的 iPhone 上，我希望表格缩小到 320x320，同时保持图像纵横比。
<HTML>
<head></head>
<body>
<div id="header"></div>
<div id="table"
<table style="height: 100%">
<tr>
<td>
<img id="topleft" src="300x300.png">
</td>
<td>
<img id="topright" src="300x300.png">
</td>
</tr>
<tr>
<td>
<img id="bottomleft" src="300x300.png">
</td>
<td>
<img id="bottomright" src="300x300.png">
</td>
</tr>
</table>
</div>
<div id="footer"></div>
</body>
</html>
这是一张图片，显示了上述代码如何在移动 Safari 浏览器中呈现。
最佳答案
如果每行有 2 张图片，您可以将表格宽度设置为 100%，将 td 和 img 宽度设置为大约 49%(以保留边框)。此外，如果您的图像可能小于可能的屏幕尺寸，请使用 img {max-width: 49%;}
关于html - 根据屏幕大小按比例缩小包含图像的 HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14568809/