css - 图像大小调整 HTML5

Question

因此，在我的 HTML5 代码中，我有想要全屏显示的图像。我将它们的高度和宽度设置为 100%，我认为应该调整大小。

如果我将图像放在 3240x480 中，它们正好适合我的手机，但在 iPad 上，拉伸(stretch)高度似乎适合，但宽度似乎保持在 320。

如果我放置 768x1004 的图像，它们非常适合 iPad，但在手机上它们显示得很大。我以为 100% 会进行重新缩放，但我想我错了。

所以我尝试将 768x1004 的图像设置为 width="window.innerWidth"。这在手机上很好地缩小了它，只是它仍然稍微超出了屏幕的范围。至于 iPad，它缩小了一些宽度，所以现在图像和屏幕墙之间有一个间隙。

关于如何获得干净简单的自动调整大小以适应屏幕的任何想法，最好只使用 1 张图像。或者我将如何设置它以便有多个图像，如果使用的是 iPad，它会放入 iPad 大小的图像，如果使用的是手机，则放入手机大小的图像？

谢谢

Answer 1

我很确定，在不真正破坏图片质量的情况下，您不能调整图像大小。但我知道您可以使用脚本将您的用户重定向到适合他们屏幕的站点。见本站http://www.dynamicdrive.com/dynamicindex9/info3.htm或谷歌“屏幕重定向”和几个选项出现在你的眼前! :))