使用响应式图像防止跳跃？答案

【问题标题】：Preventing jumps with responsive images?使用响应式图像防止跳跃？
【发布时间】：2017-04-17 12:47:21
【问题描述】：

我将 picture 元素与 srcset 一起使用，因此根据设备屏幕尺寸下载相同的图像但分辨率不同。

图片样式的 max-width: 100% 因此在下载时会强制下面的内容移动。

有没有办法告诉浏览器在使用 srcset 时使用 CSS 保留该空间？

如果不可能的话，我也对 JavaScript 答案感兴趣。

谢谢。

【问题讨论】：

下载最新的 chrome。它会自动修复它...
@Jonasw 不是每个人都使用 Chrome。
但我认为 firefox 会紧随其后，我个人并不关心其余的...
@Jonasw 如果您想在其上显示一些文本或在图像出现之前使其看起来像一个灰色矩形怎么办？在加载之前显示占位符 UI 元素很有帮助。
你说得对。如果知道图片比例，可以设置 image.height=window.innerWidth()*ratio

标签： javascript html css

【解决方案1】：

您可以根据图像宽度设置图像高度。所以你唯一需要知道的是你的相机纵横比。如果图像有不同的比例，我们就有问题了...

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

【讨论】：