2017-06-22 3 views
0

Nur mit img srcset beginnen. Ich bemühe mich, das Verhalten in Bezug auf das Zeigen von Bildern innerhalb einer bestimmten vom div diktierten Breite zu verstehen.Responsive Bild Scrset Ignorieren div Breite, um ein größeres Bild als notwendig in Firefox

Obwohl die CSS-Breite auf 1664 Pixel eingestellt ist und ein 1680-Pixel-Bild verfügbar ist, wird die 3200-Pixel-Version verwendet. Die Bildschirmauflösung ist auf 1920 x 1200 eingestellt. Der Code scheint das CSS zu ignorieren und die Browserbreite (1920px) zu verwenden.

Gibt es offensichtlich einen Fehler im folgenden Code, der dies verursachen könnte oder ist dies die Art wie srcset funktioniert?

<div style="width:1664px;"> 
    <a href="http://www.test.com"> 
     <img src="/images/1680-example-image.jpg" 
      srcset="/images/0960-example-image.jpg 960w, 
      /images/1280-example-image.jpg 1280w, 
      /images/1680-example-image.jpg 1680w, 
      /images/3200-example-image.jpg 3200w" 
      sizes="100vw"> 
    </a> 
</div> 

Antwort

1

Dies ist das richtige (wenn auch etwas nervige) Verhalten. Die w Werte sprechen immer über die Fenstergröße, nicht die Größe des Bildcontainers.

+0

Danke. Mehr Infos hier: https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/ – user2151345