如何让WKWebView中图片适配全屏？加载网络图片无法调整内容尺寸

Hey there! Let's sort out this WKWebView image sizing problem you're having. Loading the image URL directly like you did makes WKWebView treat it as a full web page, which is why the content isn't resizing to fit your WebView properly. Here are a couple of straightforward, effective solutions:

1. Wrap the Image in Styled HTML (Most Reliable) #

The easiest way to control how the image displays is to wrap it in a simple HTML string with responsive styles. This tells WKWebView exactly how to scale the image to fit its bounds:

guard let imageUrl = URL(string: yourImageUrl) else { return }

// Build an HTML string with viewport meta tag and responsive image styles
let responsiveHtml = """
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; padding: 0; background-color: transparent; }
        img { max-width: 100%; height: auto; }
    </style>
</head>
<body>
    <img src="\(imageUrl.absoluteString)">
</body>
</html>
"""

// Load the styled HTML instead of the raw URL
web.loadHTMLString(responsiveHtml, baseURL: nil)

Why this works: #

• The viewport meta tag ensures the web content matches the WebView's width.
• The img CSS rule forces the image to never exceed the WebView's width, while keeping its aspect ratio intact with height: auto.
• We set background-color: transparent so the WebView's background doesn't clash with your app's design.

2. Adjust WebView Size After Loading (For Dynamic Height Needs) #

If you need to set the WebView's height to match the scaled image (like in a table view cell), use the WKNavigationDelegate to inject JavaScript and calculate the correct size once the image loads:

First, make sure your class conforms to WKNavigationDelegate (you already set web.navigationDelegate = self, so just add the method):

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // Inject JS to get the image's natural dimensions
    webView.evaluateJavaScript("document.images[0].naturalWidth + ',' + document.images[0].naturalHeight") { result, error in
        guard let sizeString = result as? String, error == nil else {
            print("Failed to get image size: \(error?.localizedDescription ?? "Unknown error")")
            return
        }
        
        let sizeParts = sizeString.split(separator: ",")
        guard let originalWidth = Double(sizeParts[0]), let originalHeight = Double(sizeParts[1]) else { return }
        
        // Calculate scaled height based on WebView's current width
        let scale = webView.bounds.width / originalWidth
        let adjustedHeight = originalHeight * scale
        
        // Update WebView's frame or Auto Layout constraint
        webView.frame.size.height = adjustedHeight
        // If using Auto Layout, uncomment this and connect the constraint:
        // self.webViewHeightConstraint.constant = adjustedHeight
    }
}

Bonus Tip #

If you don't want users to scroll the image (since it's already sized to fit), disable scrolling on the WebView's scroll view:

web.scrollView.isScrollEnabled = false

Either of these methods should fix your content sizing issue—pick the one that fits your use case best!

内容的提问来源于stack exchange，提问作者Vineesh TP