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

Posted

技术标签:

【中文标题】如何调整html中的图像大小以适应屏幕尺寸?【英文标题】:How to resize images in html to fit screen size? 【发布时间】:2019-08-07 20:34:37 【问题描述】:

我正在尝试使用 html 加载图像并调整它的大小(也许通过使用 CSS?)以使用 WKWebView 适应我的屏幕尺寸。

我可以手动调整尺寸,但我希望它对于不同的设备是动态的。

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

一切都加载得很好。我可以编辑我的 CSS 文件,并在测试时在我的手机上进行更改。我唯一不知道的是如何调整 HTML 文件中的图像大小。通常,如果图像作为 UIImage 加载,我可以将大小设置为 view.bound.size.width (或类似的东西,取决于我想要的)。但是,我不确定如何在 HTML 文件中获取这些尺寸。或者也许还有另一种我不确定的方式?

【问题讨论】:

尝试在img中使用这个css属性width: 100vw; 非常感谢!这正是我所需要的! 【参考方案1】:

要使用浏览器大小缩放图像,您需要确保这些图像未设置为固定测量值。

表示您将使用vhvwem%vminvmaxrem

等等等等

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

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

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

这完全取决于页面如何利用某些测量值

【讨论】:

非常感谢!使用 vw 是我所需要的!

以上是关于如何调整html中的图像大小以适应屏幕尺寸?的主要内容,如果未能解决你的问题,请参考以下文章

无法让 UIImageView 调整大小以适应屏幕

如何使用 Xcode 8 上的自动布局调整对象的大小以适应不同的屏幕尺寸?

调整按钮以适应不同的屏幕尺寸

使用 jquery mobile 调整图像大小以适应移动设备上的屏幕

尝试调整我的 UIView 容器以适应较小的 iPhone 屏幕尺寸

如何水平居中对齐标签以快速适应所有屏幕尺寸