防止響應圖像跳轉？

Question

我正在使用圖片元素與srcset因此，根據設備屏幕大小下載具有不同分辨率的相同圖像。

這是最大寬度：100％對圖像的樣式，所以當它下載它迫使下面的內容移動。

有沒有什麼辦法可以告訴瀏覽器在使用srcset時使用CSS保留空間？

如果不可能，我也對JavaScript的答案感興趣。

謝謝。

Answer 1

您可以根據圖像寬度設置圖像高度。所以你唯一需要知道的是你的相機長寬比。如果圖像有不同的比例，我們有問題...

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