Implementieren von Responsive-Images mit dynamischer Breite, statischer Höhe und DPR-Bewusstsein

Für jeden Post auf einer Website wird ein Headerbild angezeigt. Dieses Bild hat eine Breite von 100vw und eine Höhe von 300px. Ich würde gerne mehrere Versionen dieses Bildes entweder über das srcset Attribut eines img Tags oder ein vollwertiges picture Element liefern (nicht sicher was an dieser Stelle, daher diese Frage).Implementieren von Responsive-Images mit dynamischer Breite, statischer Höhe und DPR-Bewusstsein

Dies würde so sein, eher einfach, das srcset Attribut:

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

Das Problem entsteht, wenn ich für verschiedene Gerätepixelverhältnisse berücksichtigen will. Angenommen, ich habe 2x und 3x Versionen aller Bilder, die oben in srcset aufgeführt sind.

Nehmen wir an, ich habe ein 2x Telefon mit einem 320px-weiten Ansichtsfenster (z. B. ein iPhone 5). Ich möchte, dass der Browser xs_2x.jpg lädt. Ebenso sagen wir, ich habe einen 1x Desktop mit einem Widescreen-Monitor. Ich möchte, dass der Browser lg.jpg lädt.

Aber jetzt sagen wir, ich habe ein größeres Telefon, eines mit einem 3x, 414px-weiten Viewport (d. H. Ein iPhone 6 Plus). In diesem Fall möchte ich, dass mein Browser sm_3x.jpg lädt. Aber mein Browser würde wahrscheinlich sm_2x.jpg stattdessen laden, weil die Breite sm_2x.jpg (1536 Pixel) näher an der Breite des Telefons (1242 Pixel) als die Breite sm_3x.jpg (2304 Pixel) ist. Dies würde zu einem Bild führen, das nicht auf dem Gerät groß ist und eine Anforderung der Website verletzt.

Wie kann ich DPR-basierte dynamische Bilder mit dynamischer Breite und statischer Höhe implementieren?

Quelle

2015-01-29 Marcus McLean

Haben Sie sich mit einem Media-Tag befasst? – JaeGeeTee

@JaeGeeTee Was meinst du mit einem Media-Tag? Eine CSS '@ media' Anfrage? –

Ja, eine @ media-Abfrage. Entschuldigung, ich werde schlampiger als der Tag weitergeht. – JaeGeeTee

background-size: 100% cover;

Dies sollte funktionieren.

EDIT: Der einfache Grund, warum dies funktioniert, ist, weil Sie es in CSS allein tun können. background-size wird den verfügbaren Platz decken siehe Artikel: http://davidwalsh.name/background-size

Erstellen Sie eine CSS-Klasse: .img-resp { background-size: 100% cover; } dann wenden Sie es auf Ihr Element.

Quelle

2015-02-05 17:42:47 Knostradamus

Code-Blöcke für sich allein sind in der Regel keine sinnvollen Antworten. Bitte editiere deine Antwort und erkläre, was der Code, den du zeigst, tut und warum/wie dieser Code die Frage beantwortet. –

-1

Ich habe keine genaue Anforderung von Ihnen erhalten.

Ich möchte Ihnen meinen Code für Ihre Anforderung zu versuchen. diesen Code Versuchen:

<!DOCTYPE html> 
    <html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Responsive Images</title> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
     </script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 
     </script> 
    </head> 
    <body> 

     <div class= "container-fluid"> 
     <div class="row"> 

<img src="http://www.technotrigger.com/wp-content/uploads/2014/01/house-in-green-field.jpg" 
    class="img-responsive"> 
      <!-- <img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg"> --> 
     </div> 
     </div> 
     </body> 
     </html>

Quelle

2015-02-10 03:04:24 Akilsree1

sollten Sie berücksichtigen, dass JPEG-Bildauflösung (DPI) für Bildschirme bedeutungslos ist. Die Hauptsache hier ist die gesamte horizontale/vertikale Anzahl von Pixeln.

Also 1x, 2x und 3x Versionen eines Bildes wären (je nach Gerätebreite!): Device - image size table

So 1x Monitor und 3x iPhone würde das gleiche Bild erfordern (1920 x 300 Pixel) und es ist Code in srcset img_name_1920px.jpg 1920w

<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">

Hinweis wäre: Wenn Sie auf einem Gerät mit einem sind Bildschirmbreite von 320px und ist ein 1x (nicht Retina) Display, sollten Sie Bild mit der Breite von 320px verwenden.

Nur die Gesamtzahl der Pixel ist hier wichtig.

Quelle

2015-02-11 07:41:57

Implementieren von Responsive-Images mit dynamischer Breite, statischer Höhe und DPR-Bewusstsein

Antwort

Verwandte Themen