Android WebView, масштабирование изображения по размеру экрана

What I have: Я загружаю изображение с URL. Я просто делаю(WebView).loadUrl(imageurl, extraheaders)

What I get: Изображение не отображается на всю ширину WebView, вокруг него пустое пространство (например, если вы откроете небольшое изображение в браузере на рабочем столе)

What i tried: Установка LayoutAlgorithm для SINGLE_COLUMN. Работает отлично, но масштабирование не работает. (У меня это включено вWebView.getSettings() Не знаю почему. настройкаsetUseWideViewPort(true); загрузить изображение без пробелов, но оно будет полностью увеличено.

 Sarim Sidd01 мая 2012 г., 11:19
Лучше не использовать LayoutAlgortihm.SINGLE_COLUMN, поскольку он устарел, теперь устарел.

Ответы на вопрос(9)

Добавить стиль CSS дляimg в начале (зависит от вашего веб-формата данных) строки данных.

<style>img{display: inline; height: auto; max-width: 100%;}</style>

Чтобы быстро сделать это с данными в WebView, я сделал это.

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);

Это очень похоже на то, что сказал bansal21ankit, но вместо этого он будет работать с каждым изображением в вашем HTML без дополнительной работы.

Редакция (уточнение содержания публикации):

У тебя может быть любойtext/html значение вместоpost.getContent() из примера.

Почтовое содержание здесь является лишь примеромtext/html контент, который загружается из некоторого источника данных и затем объединяется сstyle часть, которая делает любое изображение в данном контенте, чтобы соответствовать экрану.

 Johnny Wu18 апр. 2016 г., 05:06
@ Тони ... ты можешь объяснить post_content часть своего сообщения? Как я могу получить это с URL? Благодарность
 Tony19 мар. 2018 г., 20:08
Это зависит от того, как вы вставляете свое видео, это можно сделать черезiframe тег,video тег или, возможно, каким-либо другим способом, поэтому может быть трудно найти унифицированное решение, которое выглядело бы хорошо, но быстро использовать решение в ответе, который вы можете попробовать<style>img, iframe, video{display: inline; height: auto; max-width: 100%;}</style>. Ссылка на полный пример: Jsfiddle.net / ssrq2d6t / 17
 Tony19 апр. 2016 г., 19:40
@ JohnnyWu обновил ответ с информацией оpost.getContent() часть
 Dark Leonhart19 мар. 2018 г., 10:32
Привет, это действительно помогает. Но как насчет видео? Извините, я не веб-разработчик, поэтому я не знаю о CSS.

webView = (WebView) findViewById(R.id.webView); WebSettings webSettings = webView.getSettings(); webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Этот код работает для меня:

String strData = "<head>" + "<style>" + ".smal-video-pnl,.smal-video-thumb,.detail-hldr{margin-left: 0px;margin-right:0px;}" + "</style>" +
            "</head>" + mListItem.get(position).getTitbits();
holder.webViewStatus.loadDataWithBaseURL(null, strData, "text/html", "UTF-8", null);
 Eugen Konkov16 дек. 2016 г., 13:09
пожалуйста, отформатируйте свой код

но я надеюсь, что это поможет, вот что вы можете сделать:

String html = "<html><body><img src=\"" + URL + "\" width=\"100%\" height=\"100%\"\"/></body></html>";
mWebView.loadData(html, "text/html", null);

Это сделает изображение точно таким же, как ширина вашего WebView, в остальном вы можете настроить сам WebView.

 Farhad Faghihi16 мая 2014 г., 08:02
Может быть, немного поздно, но при таком подходе зум-котроллс не работает. Но это круто и обаятельно

 WebView data = (WebView) getViewById(R.id.webview1);
 data.getSettings().setLoadWithOverviewMode(true);
 data.getSettings().setUseWideViewPort(true);
 supermus27 мар. 2013 г., 16:59
Если размер изображения больше размера экрана, изображение не будет соответствовать размеру экрана, но экран будет соответствовать размеру изображения (это будет выглядеть так, будто кто-то уменьшил изображение, чтобы увидеть весь контент)
 3k-12 авг. 2013 г., 17:57
@ supermus Когда LoadWithOverviewMode и UseWideViewPort оба включены, изображениевол подходит к экрану. Я разрабатываю для API уровня 16, и ваше утверждение не относится к этой версии. Я одобряю этот ответ.
 magorich09 февр. 2015 г., 19:35
Не совсем та же проблема, но у меня это сработало, я использовал изображение в html-файле, который загружаю в веб-просмотр. <html> <body> <img src = "restaurantes.png" style = "display: inline; высота: авто; максимальная ширина: 100%;"> </ body> </ html> webView.getSettings (). setLoadWithOverviewMode (правда); . WebView.getSettings () setUseWideViewPort (истина); webView.getSettings () setJavaScriptEnabled (истина). webView.getSettings () setSaveFormData (истина). webView.getSettings () setBuiltInZoomControls (истина). webView.loadUrl ( "Файл: ///android_asset/your_file.html");
 magorich09 февр. 2015 г., 19:37
Извините за плохой формат
Решение Вопроса

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();

String data = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
data = data + "<body><center><img width=\""+width+"\" src=\""+url+"\" /></center></body></html>";
webView.loadData(data, "text/html", null);

Редактировать: так как это осталось в качестве принятого ответа, вот лучшее решение (все благодарности Тони ниже):

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);
 artouiros03 мая 2012 г., 07:45
Спасибо, есть ли способ отправить дополнительные заголовки (например, реферер) при использовании этой структуры?
 2cupsOfTech10 июн. 2014 г., 21:56
см. Тони ответ ниже, это тот, который работает на разных платформах и устройствах

Код

web = (WebView) findViewById(R.id.at_image_web);
web.getSettings().setBuiltInZoomControls(true);
web.getSettings().setUseWideViewPort(true);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setLoadWithOverviewMode(true);
web.loadUrl(linkImage);

я прочитал, что для того, чтобы соответствовать ширине экрана, вы должны добавить это в свой HTML или XML внутри поля:

width="100%"

Так что я вместо того, чтобы масштабировать и масштабировать изображения, я получил xml, поместил его в StringBuilder, нашел src = "https://blablabla.com/image.png", который находится внутри поля, и просто перед подстрокой "src" я вставил "width =" 100% "", а затем установил свой webView с помощью StringBuilder, код mi такой:

public void setWebViewWithImageFit(String content){

        // content is the content of the HTML or XML.
        String stringToAdd = "width=\"100%\" ";

        // Create a StringBuilder to insert string in the middle of content.
        StringBuilder sb = new StringBuilder(content);

        int i = 0;
        int cont = 0;

        // Check for the "src" substring, if it exists, take the index where 
        // it appears and insert the stringToAdd there, then increment a counter
        // because the string gets altered and you should sum the length of the inserted substring
        while(i != -1){
            i = content.indexOf("src", i + 1);
            if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
            ++cont;
        }

        // Set the webView with the StringBuilder: sb.toString()
        WebView detailWebView = (WebView) findViewById(R.id.web_view);
        detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}

Надеюсь, это поможет, мне понадобилось несколько часов, чтобы понять, как решить эту проблему.

Я думаю, это решит твою проблему: -

      WebView web;

      web = (WebView) findViewById(R.id.webkit);
      web.setWebViewClient(new Callback());
      web.getSettings().setJavaScriptEnabled(true);
      web.getSettings().setLoadWithOverviewMode(true);
      web.getSettings().setUseWideViewPort(true);
      web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
      web.setScrollbarFadingEnabled(false);
 artouiros01 мая 2012 г., 10:36
Это не проблема с полосой прокрутки, мое пустое пространство составляет 50% экрана. Все такой же. Как будто изображение уменьшено больше, чем размер экрана.

Ваш ответ на вопрос