Wie benutzt man HTML img srcset im flüssigen Layout?

Question

Ich habe ein Webdesign, bei dem die Layoutgröße und die Bildgröße auf denen von em basieren. Zum Beispiel:

Da die Bildgröße in em angegeben ist, ist sie immer im Lockstep mit der Textgröße. Leider wissen wir nicht, wie viele CSS Pixel ein Bild breit ist. Wir wissen auch nicht, wie viele Geräte Pixel breit ist ein Bild, das auf die Größe eines em abhängt, der Vergrößerung usw.

Die <img>srcset und sizes Attribute erscheinen fast die Lösung sein, ich will. Aber ich bin mir nicht sicher, ob das für meine Situation hier gilt. Ich kann mehrere Asset-Größen erzeugen, z. 320 × 240, 480 × 360, 640 × 480, etc.

Ich möchte, dass der Webbrowser die Inhaltsbox für das <img> Element betrachtet, berechnet, wie viele Geräte Pixel breit sind, und das am besten geeignete Bild herunterladen aus einer Liste von Alternativen. Wie kann ich das tun?

Hinweis: Ich habe über die srcsetx Syntax gelesen, aber es scheint nicht das richtige Werkzeug zu sein.

Answer 1

Srcset ist definitiv eine gute Möglichkeit, dies zu erreichen. Sie haben im Grunde eine Anzahl von Bildern, die Sie für mehrere Größen speichern. Normalerweise sollten Sie das Bild möglichst in der Breite des Elements haben. Dann legen Sie das Bild fest, das Sie für jede Bildschirmbreite verwenden möchten.

<img src="image.jpg" alt="Name" 
    srcset=" 
    /img-2400.jpg 2400w, 
    /img-1800.jpg 1800w, 
    /img-1200.jpg 1200w, 
    /img-900.jpg 900w, 
    /img-600.jpg 600w, 
    /img-400.jpg 400w" 
    sizes = "(min-width: 2400px) 900px, 
      (min-width: 1800px) 600px, 
      (min-width: 1200px) 500px, 
      (min-width: 900px) 500px, 
      (min-width: 600px) 600px, 
      400px" /> 

So würde /img-2400.jpg 2400w/img-2400.jpg verwenden, wenn der Bildschirm am nächsten 2400px breit ist.

Im Größenattribut können Sie auch angeben, wie groß die Bildgröße bei bestimmten Bildschirmgrößen sein soll, da sie nicht immer 100% der Breite des Browsers beträgt.

Also (min-width: 2400px) 900px sagt dem Browser, dass, wenn das Fenster mindestens 2400px breit ist, das Bild 900px weit auf dem Bildschirm sein wird. So soll, dass der Browser erzählt dann /img-900.jpg zu greifen, wenn das Fenster 2400px breit ist, da das Bild auf 900w gesetzt wird, das ist in der Nähe von 900px (seinem genauen).

Sie können dies immer noch ungefähr berechnen, wenn Sie em verwenden, indem Sie die von Ihnen verwendeten em mit 16 multiplizieren (dies kann je nach Browsereinstellungen oder Einstellungen in Ihrem CSS anders sein). Wenn Sie also die Breite eines Bildes in css auf 20em setzen, ist das 16 * 20 = 320px.

Wenn diese in Kombination verwendet werden, sollten moderne Browser in der Lage sein, abhängig von der Bildschirmgröße das beste zu erfassende Bild zu erkennen. Siehe Browserkompatibilität für srcset hier: https://caniuse.com/#search=srcset