Sprünge mit ansprechenden Bildern verhindern?

Question

Ich verwende das Bild Element mit srcset, so dass das gleiche Bild, aber mit unterschiedlicher Auflösung heruntergeladen wird, basierend auf der Bildschirmgröße des Geräts.

Es ist max-width: 100% auf die Bildstile so, wenn es Downloads es zwingt den Inhalt unten zu bewegen.

Gibt es eine Möglichkeit, dem Browser mitzuteilen, diesen Speicherplatz bei Verwendung von srcset mit CSS zu reservieren?

Ich bin auch an einer JavaScript-Antwort interessiert, wenn es nicht möglich ist.

Danke.

Answer 1

Sie können die Bildhöhe basierend auf der Bildbreite festlegen. Das einzige, was Sie wissen müssen, ist das Seitenverhältnis Ihrer Kameras. Wenn die Bilder unterschiedliche Proportionen haben, haben wir ein Problem ...

ratio=9/16; 
window.onload=window.onresize=function(){ 
    Array.prototype.forEach.call(document.getElementsByTagName("img"),function(img){ 
     img.height=img.width*ratio; 
    }); 
};