使用自适应图像防止跳转？

Question

我在 srcset 中使用图片元素，因此根据设备屏幕尺寸下载相同图像但分辨率不同的图片。

图片的样式 max-width：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;
   });
};