WKWebView content

Question

I am using WKWebView().The size of my webView height = 100. I am loading a .gif image inside WKWebview. The size of gif image height = 300. I want to compress the image inside webview to fit inside it.

AS shown in below screen shot, the image is not shrinking to webView Size,its original size is 300

If i give sixe of WkWebview to 300 , it comes proper .

I have tried giving

    self.webView.contentMode = .scaleAspectFit
    self.webView.sizeToFit()
    self.webView.autoresizesSubviews = true

    self.webView.scrollView.contentInset = UIEdgeInsetsMake(0,0,0,0)
    self.webView.scrollView.isScrollEnabled = false

This is the way I am adding the WKWebview:

self.webView = WKWebView() 
self.webView.frame = CGRect.init(x: 0, y: 64, width: self.view.frame.width, height:200) 
self.webView.autoresizingMask = .flexibleWidth 
let heightConstraint = NSLayoutConstraint(item: self.webView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 200)
self.view.addSubview(self.webView) 
let filePath = Bundle.main.path(forResource:"token", ofType: "gif")
let gifData = NSData(contentsOfFile: filePath!) 
self.webView.load(gifData as! Data, mimeType: "image/gif", characterEncodingName: String(), baseURL: NSURL() as URL)

score 3 · Accepted Answer · edited May 23 '17 at 12:31

3

Depending on the configuration of your web view, you can either:

style the img tag so that it fills the height of the web view:

let htmlContent = "<img src=\"token.gif\" style=\"margin: auto; height: 100%\" />"

or hardcode it's height:

let htmlContent = <img src=\"token.gif\" style=\"margin: auto; height: 300px\" />"

alternatively, you can use a string interpolated constant instead of the hardcoded value

let htmlContent = "<img src=\"token.gif\" style=\"margin: auto; height: \(webViewHeight)px\" />"

You can then load the html to the web view:

webView.loadHTMLString(htmlContent, baseURL: Bundle.main.bundleURL)

To speed up the web view, you can inline the image data instead of referencing the gif file - see Embedding Base64 Images for more on this topic.

edited May 23 '17 at 12:31

Community

1
1

answered Feb 25 '17 at 17:22

Cristik

30,989
25
91
127

This is the way i am adding WkWebview: self.webView = WKWebView() self.webView.frame = CGRect.init(x: 0, y: 64, width: self.view.frame.width, height:200) self.webView.autoresizingMask = .flexibleWidth let heightConstraint = NSLayoutConstraint(item: self.webView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 200) – gaurav sharma Feb 26 '17 at 11:07
self.view.addSubview(self.webView) let filePath = Bundle.main.path(forResource:"token", ofType: "gif") let gifData = NSData(contentsOfFile: filePath!) self.webView.load(gifData as! Data, mimeType: "image/gif", characterEncodingName: String(), baseURL: NSURL() as URL) – gaurav sharma Feb 26 '17 at 11:10
All i need is to resize the image loaded inside the WKWebview to webview size. @Cristik – gaurav sharma Feb 26 '17 at 11:13
I tried your solution. "webView.loadHTMLString" not loading anything. – gaurav sharma Mar 01 '17 at 05:38
Adding base url worked ! Thanks for the quick fix. Only thing is webview takes some miliseconds to load the content once view is loaded. – gaurav sharma Mar 02 '17 at 15:27
Is there any other component in iOS which can load gif image except webview ? – gaurav sharma Mar 02 '17 at 17:03
I tried doing it, but as per stack overflow policy , for beginners its not allowing to show publicly the upvote though taken into account – gaurav sharma Mar 08 '17 at 17:14
using `height: 100%` works much better. – MMujtabaRoohani Jun 07 '22 at 11:56

WKWebView content

1 Answers1