我有声明宽度和高度的图像,例如:
<img src="foo.jpg" width="1500" height="1800" alt="bar" />
Run Code Online (Sandbox Code Playgroud)
它们位于响应式网格中,因此它们显示在max-width: 100%.它们是延迟加载的.问题在于,尽管有height: auto;图像,图像在加载之前总是显示正方形,这会在加载完成后产生页面高度的跳跃.
因此,上面的图像示例,在我的960px宽度网格中,将显示960px x 960px的占位符,直到加载完整图像,此时它将是960px x Y(其中Y是正确的高度).
我的问题是如何让占位符图像模仿实际图像的最终加载尺寸?