Responsive Bilder srcset nicht wie erwartet verhalten

Ich versuche, ein full screen responsive image solution mit den folgenden losen Anforderungen umzusetzenResponsive Bilder srcset nicht wie erwartet verhalten

0-600px> kleines Bild zeigt
601-900px> zeigt Medium Bild
901-2000px> zeigt große Bild

nach einigem Graben, habe ich mich entschlossen, um mit den Dimensionen zu arbeiten:
iphone 6> 414x736
iPAD> 768x1024

ich erstellt separate Bilder für jede Bildschirmgröße (Art Direction Zwecke) und verwendet, um die folgenden srcset Code

<img src="/assets/images/414X736/artGallery.jpg" 
     srcset="/assets/images/414X736/artGallery.jpg 414w, 
       /assets/images/768x1024/artGallery.jpg 768w, 
       /assets/images/1920x1080/artGallery.jpg 1920w">

Die Bilder haben die folgende CSS (so es wie Hintergrund verhält: cover)

img { 
    display:block; 
    height:100vh; 
    width:100vw; 
    object-fit:cover; 
}

Größe ich meinen Desktop-Monitor klein, und bis zur vollständigen Bildschirm der Größe verändert, werden die Bilder in dem

an der richtigen Stelle ersetzt

jedoch auf meinen Telefonen und Tablets, es zeigte konsequent die 1920 Bild

Im Idealfall würde Ich mag die Bilder substitue wenn das Browserfenster von klein bis groß und groß zu klein

Mein Verständnis von srcset Skalierung ist, dass, sobald es das größte Bild geladen wird, ist es nicht kleinere geschätzt

Hilfe und Anregungen

Quelle

2017-02-26 sygad1

Auf Retina-Display lädt es immer das Bild mit maximaler Größe wegen Gerätepixel-Verhältnis –

Wenn Sie irgendeine Art von Art Direction machen wollen nicht geladen werden, Sie Notwendigkeit<picture> Inste zu verwenden Anzeige von srcset-w.

Übrigens, Ihr Code vermisst ein sizes Attribut, das obligatorisch ist, wenn Sie das srcset Attribut mit w Deskriptoren verwenden.

Quelle

2017-03-24 13:39:36

Es ist nicht obligatorisch, wenn Sie nicht angegeben haben Browser wird es nehmen hat Größen = "100vw". –

Es steht geschrieben "Wenn das Attribut srcset über Zeichenketten für Bildkandidaten verfügt, die einen Width-Deskriptor verwenden, muss das Attribut sizes auch vorhanden sein" in [HTML5-Spezifikation] (https://html.spec.whatwg.org/multipage/embedded-content) .html). –

Responsive Bilder srcset nicht wie erwartet verhalten

Antwort

Verwandte Themen