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

Question

I'm trying to load an image using HTML and resize it (maybe by using CSS?) to fit my screen size using WKWebView.

I'm able to adjust the sizes manually, but I'd like it to be dynamic for different devices.

I create my file in HTML, then load the image using an img tag. The CSS file is a separate file. To load the image using Swift and xcode, I use Webkit and load it from a local URL.

Everything loads just fine. I can edit my CSS file and the changes occur on my phone when testing. The only thing I can't figure out is how to resize the image in the HTML file. Normally, if the image is loaded as a UIImage I can set the size to view.bound.size.width (or something similar depending what I want). However, I'm not sure how to get those dimensions INSIDE the HTML file. Or maybe there is another way I'm not sure about?

Answer 1

To scale images with browser size you will want to make sure these images are not set to a fixed measurement.

Meaning you would use vh , vw , em , % , vmin , vmax , rem

etc etc.

This would solely depend on how your page is marked up, and which media queries you have in place if any

Some people set font-size with their media queries.

When this is done they would use em as a basis of measurement to make their page responsive.

It all depends on how the page is utilizing certain measurements