Wie wird ein Bild angezeigt, das für den mobilen Bildschirm geeignet ist?

Ich habe versucht, eine responsive Webseite zu implementieren, um ein Bild anzuzeigen. Um das zu tun, verwende ich HTML5. Unten ist ein Beispielcode:Wie wird ein Bild angezeigt, das für den mobilen Bildschirm geeignet ist?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <style type="text/css"> 
     .center{margin: 0px auto; display: block;} 
    </style> 
</head> 
<body> 
    <picture> 
     <source media="print" srcset="https://www.mywebsiteurl/[email protected]"> 
     <source media="(max-width: 480px)" 
       srcset="https://www.mywebsiteurl/[email protected]"> 
     <source media="(max-width: 640px)" 
       srcset="https://www.mywebsiteurl/[email protected]"> 
     <source media="(max-width: 1024px)" 
       srcset="https://www.mywebsiteurl/[email protected]"> 
     <img src="https://www.mywebsiteurl/[email protected]" class="center"> 
    </picture> 
</body> 
</html>

Und das ist die Ansicht der Webseite von meinem Handy (Samsung Galaxy S6 Edger):

Aus der Sicht von meinem Handy, sehe ich es ein weißer Raum um mein Bild. Wie kann ich es ohne Leerraum auf den Bildschirm anpassen?

Quelle

2016-04-01 Trind 07

Das muss das Problem des Körpers Standardabstand sein

Körper einen Standardabstand in jeder HTML-Seite hat man es auf 0

body{ 
    margin:0; 
    padding:0; 
}

Quelle

2016-04-01 04:34:44

Ich habe das in meinem Beispielcode verwendet. Es nützt nichts, es bringt nichts. –

Gut! Aber es hat immer noch Platz von der linken und rechten Seite des Bildes. –

wärst du in der Lage, eine Geige zu erstellen ... es muss ein anderes Problem geben –

Einige Browser einstellen benötigen Standardkörpermarge haben. u kann es durch entfernen:

body { 
    margin: 0px; 
}

Quelle

2016-04-01 04:42:17 hoffman

Versuchen

* { 
margin: 0; 
padding: 0; 
}

Dadurch wird die Marge und Polsterung aller Elemente zu 0 gesetzt, aber sicher sein, dies das erste, was in Ihrer CSS-Datei ist.

können Sie auch versuchen,

picture { 
height: 100vh; // vh is viewport height 
width: 100vw; // vw is viewport width 
}

Quelle

2016-04-01 04:44:24

aber Sie können nicht sicher sein, dass es nur ein Bild auf Seite –

gibt. Tatsächlich gibt es nur ein Bild. Aber Bild {Höhe: 100vh; Breite: 100 Vw; } hat keinen Einfluss auf die Seite, zumindest habe ich auf meinem Handy getestet. –

@GauravAggarwal das ist, wenn Sie dieses spezifische Bild mit einer Klasse oder etwas wie '.containingDiv> Bild zielen. @ Trind07, das bedeutet etwas ist das Hinzufügen von Margen aus irgendeinem Grund, die ungerade ist, wenn Sie die Ränder mit meinem ersten Code-Snippet zurückgesetzt. –

ich die gleiche Antwort haben wie andere, die ich einen Vorschlag
mit oder Normalize Versuchen
hinzufügen müssen jedoch haben. Die Verwendung einer dieser CSS-Dateien hilft besonders in einem solchen Fall sehr.

Codes in Antwort erwähnt wie

*{ 
    margin:0; 
    padding:0; 
}

gibt es bereits in diesen Dateien. Es hat viel mehr Inhalt, der Standard-Stil von Browsern entfernt und gibt Ihnen eine saubere und saubere Möglichkeit, Ihr eigenes CSS zu definieren.

Quelle

2016-04-01 11:34:24

Wie wird ein Bild angezeigt, das für den mobilen Bildschirm geeignet ist?

Antwort

Verwandte Themen