调整UIWebView中的图像大小以适应视口大小

Question

我在iPhone应用程序中的UIWebView中显示一些包含图像的HTML。当图像宽度超过iPhone视口时，会出现水平滚动条，但这不是我的意愿，因为重点是文本而不是图像。

是否有一种方法可以根据宽度调整UIWebView中显示的图像大小（最好是即使设备旋转也能实现）？

- lorem monkey

Answer 1

如果您希望最大宽度等于webView的宽度，请使用max-width CSS属性。

max-width: 100%; width: auto; height: auto;

- Nikolai Krill

---

谢谢！我已经将它添加到我的CSS文件中。我最初认为UIWebView会有一个设置来防止图像变宽，但这很简单！ - lorem monkey

我尝试添加了这段代码：NSString *cssString = @"<style type='text/css'>max-width: 100%; width: auto; height: auto;</style>"; 但它没有产生任何影响。 - Dejell

@Odelya的代码 <style type='text/css'>img { max-width: 100%; width: auto; height: auto; }</style> 对我起了作用。 - bugloaf

我不得不使用100%%而不是100％，因为它将其视为转换说明符。其余部分相同。 - Bilbo Baggins

Answer 2

如果图像位于UIWebView中，您可以尝试使用CSS将它们的大小设置为100％？类似这样的代码. . .

<img style="width:100%" src="..." />

免责声明：我没有现成的XCode来测试，但应该可以工作！您必须尝试自己测试！

- deanWombourne

---

虽然我的答案可以自动缩放到全宽，但并不如被接受的答案好。如果你的图片比较小怎么办呢？被接受的答案只会缩小过大的图片。（在HTML中硬编码属性被认为是一种不好的做法！） - deanWombourne

@deanWombourne 我试过这个解决方案了 - 我把它添加到HTML中NSString *cssString = @"<style type='text/css'>max-width: 100%; width: auto; height: auto;</style>";但是图片仍然很大。 - Dejell

这也可以工作：<img style="max-width: 100%; width: auto; height: auto" src="..." /> - spstanley

Answer 3

对于AutoHeightWebView，您可以在customStyle属性中设置max-width：

<AutoHeightWebView
customStyle={`
        * {
            max-width: 100%;
        }
      `}

- مصطفى