gpt4 book ai didi

html - 根据屏幕大小按比例缩小包含图像的 HTML 表格

转载 作者:太空宇宙 更新时间:2023-11-03 19:34:11 24 4
gpt4 key购买 nike

考虑以下代码。如何以响应方式实现表格,以便在大屏幕上表格高度和宽度等于图像(例如 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 浏览器中呈现。

enter image description here

最佳答案

如果每行有 2 张图片,您可以将表格宽度设置为 100%,将 td 和 img 宽度设置为大约 49%(以保留边框)。此外,如果您的图像可能小于可能的屏幕尺寸,请使用 img {max-width: 49%;}

关于html - 根据屏幕大小按比例缩小包含图像的 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14568809/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com