Cover-Bild durch CSS in Web-Ansicht

Hy alle,Cover-Bild durch CSS in Web-Ansicht

Ich arbeite an einem Leser der Größe und ich habe ein Problem mit dem neuesten Generation von Android-Geräten, die mit hohen Auflösung kommt. Die Bilder auf WebViews zeigen sehr kleine, während auf älteren Geräten ihre Größe akzeptabel schien. Ich kann den Inhalt der HTML-Dateien nicht manipulieren, ich kann nur die Einstellungen des WebView und die mit dem WebView verknüpfte .css-Datei manipulieren.

Zunächst wenn ich das Buch öffne, zeigt das Bild sehr klein, aber wenn ich das Bild manipuliere, wird es vergrößert und wird auf beiden Seiten getrimmt.

img 
{ 
    max-width: 100%; 
    width:auto; 
    height: auto; 
}

ich auch versucht:

img 
{ 
    min-width: 100%; 
    height: auto; 
}

Dies ist die webView Einstellungen:

testWV = (WebView) findViewById(R.id.mywebview1); 
testWV.setDelegate(this); 

testWV.setVerticalScrollBarEnabled(false); 
testWV.setHorizontalScrollBarEnabled(false); 
testWV.getSettings().setDefaultZoom(ZoomDensity.FAR);

Jeder Vorschlag würde geschätzt.

Quelle

2016-11-29 coder

Sie eine bestimmte Größe in Ihrem Java-Code in Ihre webview einstellen wollen? –

Nein Ich kann keine bestimmte Größe einstellen, da sie von Gerät zu Gerät unterschiedlich ist. Ich möchte nur, dass das Coverbild die gleiche Breite des webView mit einer proportionalen Höhe hat. – coder

Ok, sehe meine Antwort, wenn es funktioniert –

Okay, versuchen diese, können Sie den Kopf-Tag entfernen, wenn Sie es wünschen, ist der Stil der wichtige Teil

String content = "Your Content"; // I assume your content is a string 

testWV = (WebView) findViewById(R.id.mywebview1); 
testWV.setDelegate(this); 

testWV.setVerticalScrollBarEnabled(false); 
testWV.setHorizontalScrollBarEnabled(false); 
testWV.getSettings().setDefaultZoom(ZoomDensity.FAR); 

String head = "<head><meta name='viewport' content='target-densityDpi=device-dpi'/></head>"; 

String style = "<style> " + 
       "img { height:auto !important; width:100% !important; } " + 
       "</style>"; 

testWV.loadDataWithBaseURL("", head + style + content, "text/html", "UTF-8", "");

Quelle

2016-11-29 13:47:26

Ich fürchte, es hat nicht funktioniert, ich habe eine über vergrößerte Omg von beiden Seiten getrimmt. Danke für deinen Vorschlag. – coder

Wenn Ihr img vergrößert ist, sollten Sie die Breite von 100% auf einen niedrigeren Wert reduzieren. Auch wenn Ihr Bild auf beiden Seiten beschnitten ist, sollten Sie ihm eine linke und eine rechte Füllung geben. Können Sie auch ein Bild (Snapshot) posten, damit ich eine Lösung für Ihr spezifisches Problem schreiben kann. –

img {padding-left: 20px! Wichtig; padding-right: 20px! wichtig; } –

Cover-Bild durch CSS in Web-Ansicht

Antwort

Verwandte Themen