7

iPhoneアプリでは、インターネットからダウンロードした画像をプレビューしたいwebviewがあります.私の問題は、いくつかの画像がwebviewのフレームに収まるように表示されていないことですが、ほとんどはそうです. これは、これらの画像が大きすぎるためだと思います。私は何か間違ったことをしていますか？助けてください

私が欲しいのは、 webview のフレームに合わせて webview に画像をロードするだけです。他のコードを提供できますが、イメージビューではなくウェブビューに関するものである必要があります。

これが私が使用しているコードです。

self.documentData = [NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://www.folio3.com/corp/wp-content/uploads/2013/02/Entrance_A-3.jpg"]];
self.webView.scalesPageToFit = YES;
[self.webView loadData:self.documentData MIMEType:@"image/jpeg" textEncodingName:@"utf-8" baseURL:nil];

さらに、ここに出力のスクリーンショットがあります（スクロールインジケーターが明確に表示されます。つまり、画像がwebviewのフレームに収まりません）出力スクリーンショット

4

3 に答える 3

4

UIWebViewまず、次のviewDidLoad:ようにフレームを確認して設定します。

webView.frame = self.view.frame;

この Delegate メソッドを使用した後、scalesPageToFit以下のようにプロパティを設定します。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    webView.scalesPageToFit = YES;//set here
    return YES;
}
于 2013-05-22T05:54:47.537 に答える
1

このソリューションは、Ammar Hasan からの回答に基づいています。オリジナルの代わりに...

NSData *data = [NSData dataWithContentsOfURL:imageURL];
[self.webView loadData:data MIMEType:@"image/jpeg" textEncodingName:@"utf-8" baseURL:nil];

...あなたはこれを行うことができます：

NSString *photoWrapper = [NSString stringWithFormat:@"\
 <html>\n\
    <head>\n\
        <meta name=\"viewport\" content=\"width=device-width\" />\n\
        <style type=\"text/css\">\n\
            body {\n\
                margin: 0;\n\
                padding: 0;\n\
            }\n\
            img {\n\
                width: 100%%;\n\
            }\n\
        </style>\n\
    </head>\n\
    <body>\n\
        <img src=\"%@\" />\n\
    </body>\n\
</html>\
", URL];
[self.documentView loadHTMLString:photoWrapper baseURL:nil];

これで、Web ビューが画像の幅の半分未満の場合でも、画像は Web ビューの幅に合わせてスケーリングされます。これは、UIWebView が課す制限のようです。私が望んでいたように、ユーザーは画像を拡大縮小することができます。ビューポート メタ タグにminimum-scaleとを追加することで、これをオーバーライドできます。maximum-scale

于 2017-01-09T20:58:16.777 に答える
0

次のコードのように、WebView の html コンテンツを使用してみてください。

<html>
<head>
   <title>Title</title>
</head>
<body style='margin:0px; padding:0px;'>
   <img src='<your_image_url>' 
        style='max-width:320px; max-height:460px;' 
        alt='Your_Image_Name'/>
</body>
</html>

画像のサイズを変更するには、CSS (カスケード スタイル シート) スタイルを使用し、画像のスタイル属性でこれらのスタイル プロパティを使用します。

最大幅、最小幅、幅、最大高さ、最小高さ & 高さ

于 2013-05-22T07:04:55.717 に答える