Menu
I'm loading a simple html string into a WKWebView and my objective is to have a full screen image in that webview.
The problem is that the image seems to be scaled twice as big as expected.
I simply load the WKWebView using
NSString *html = @"..." // the content
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];
I'm expecting the image to be full screen and fit the screen
But I get an image that seems to be twice as big as the screen resolution (not the text at the bottom left(
I tried playing with using the initial-scale and maximum-scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
But it does not work.
Also not that this seems to happen only for images that are base64 encoded in the HTML but this is something I need.
The HTML is
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
</head>
<img src="data:image/png;base64, ...">
<!-- <img src="http://placehold.it/750x1334"> -->
</body>
</html>
Here is the html complete HTML
911
I added and it is working.
The HTML is:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style>
img {
width:auto;
height:auto;
max-width:100%;
max-height:90vh;
}
</style>
</head>
<body>
<!-- body container -->
</body>
</html>
answered Oct 29 '25 01:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With