How to resize webview contents including images to fit bounds horizontally

Question

I have a WKWebView on my app. If the web view contains a big image, it overflows the screen and users have to scroll horizontally.

How can I force the webview to clip the contents (resize images as needed) to fit the boundaries of the container?

Answer 1

@mistahenry's comment worked for me:

relative width, ie width: 100%. You just have to also set <meta name="viewport" content="width=device-width, initial-scale=1"> in your html. If your webview is 100% the width of the screen, this should work just fine. Essentially, you need to be constraining the image in CSS to be relative to the outside container