我使用 Unveil.js延迟加载图像。为了节省时间/空间，我使用了 base64 占位符图像:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://unsplash.it/1000/500?image=631" width="1000" height="500" data-unveil="true" />
我遇到的问题是如何调整占位符图像的大小。它似乎始终保持 1 的纵横比，这对于响应式网站来说是个问题。
因此，如果上面的图像标签位于 <div> 中宽度为 50% 和 <div>的计算宽度为 500px(总视口(viewport)宽度为 1000px)，则图像将溢出 <div>除非我使用 max-width: 100%; height: auto;然后非数据 URI 图像将正确缩放并保持其纵横比。
但是，无论 <img> 中的宽度/高度属性如何，数据 URI 图像始终保持方形标签或 CSS 规则。这会导致在较慢的服务器上跳来跳去，因为 Unveil.js 延迟加载的图像并不总是方形的。
我设置了一个快速 fiddle 来演示大小差异(没有 Unveil.js):http://jsfiddle.net/silb3r/7bnfqkko/1/
还有一个带有 Unveil.js 的:http://jsfiddle.net/silb3r/2eff5thm/ (您可能需要手动限制连接才能看到问题)
是否有人熟悉确保数据 URI 保持原始图像纵横比的方法？最好不要添加更多 jQuery，但我对任何事情都持开放态度。
感谢您的任何建议。
最佳答案
好吧，您的 CSS 会覆盖通过 HTML 属性设置的宽度和高度，因此固有的图像尺寸开始发挥作用，那些是 1×1 像素。因此，无论如何设置 height:auto 自然会生成方形图像。
如果您事先知道图像的纵横比(并且您似乎知道，假设您使用的那些宽度和高度 HTML 属性值不是完全任意的——否则，几行服务器端代码可以从图像文件，如果它需要更动态)，那么你可以使用所谓的“padding-top hack ” 来创建一个将使用正确纵横比的占位符。
关于css - 数据 URI 图像大小(自动高度)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28711327/