如何调整html中的图像大小以适应屏幕大小？

Question

我正在尝试使用 HTML 加载图像并使用 WKWebView 调整它的大小（也许使用 CSS？）以适应我的屏幕大小。

我可以手动调整大小，但我希望它对于不同的设备是动态的。

我在 HTML 中创建我的文件，然后使用 img 标签加载图像。 CSS 文件是一个单独的文件。 要使用 Swift 和 xcode 加载图像，我使用 Webkit 并从本地 URL 加载它。

一切都加载得很好。 我可以编辑我的 CSS 文件，测试时我的手机上会发生变化。 我唯一想不通的是如何调整 HTML 文件中的图像大小。 通常，如果图像作为 UIImage 加载，我可以将大小设置为 view.bound.size.width （或类似的东西，取决于我想要的）。 但是，我不确定如何在 HTML 文件中获取这些尺寸。 或者也许还有另一种我不确定的方式？

Answer 1

要使用浏览器大小缩放图像，您需要确保这些图像未设置为固定尺寸。

这意味着您将使用vh 、 vw 、 em 、 % 、 vmin 、 vmax 、 rem

等等等等

这完全取决于您的页面是如何标记的，以及您有哪些媒体查询（如果有的话）

有些人使用他们的媒体查询设置font-size 。

完成后，他们将使用em作为衡量的基础，以使他们的页面具有响应性。

这完全取决于页面如何使用某些度量