数据 URI 图像大小（自动高度）

Question

我使用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 的纵横比，这对于响应式网站来说是个问题。

因此，如果上面的图像标签位于宽度为 50% 的 <div> 内，并且 <div> 的计算宽度为 500 像素（总视口宽度为 1000 像素），则图像将溢出 <div>，除非我使用max-width: 100%; height: auto; 然后非数据 URI 图像将正确缩放并保持其纵横比。

但是，无论<img> 标记或 CSS 规则中的宽度/高度属性如何，数据 URI 图像始终保持方形。这会导致在较慢的服务器上出现一些跳跃，因为 Unveil.js 延迟加载的图像并不总是方形的。

我设置了一个快速小提琴来演示尺寸差异（没有 Unveil.js）：http://jsfiddle.net/silb3r/7bnfqkko/1/

还有一个使用 Unveil.js：http://jsfiddle.net/silb3r/2eff5thm/（您可能需要手动限制连接才能看到问题）

是否有人熟悉确保数据 URI 保持原始图像纵横比的方法？最好不要添加更多 jQuery，但我对任何事情都持开放态度。

感谢您的任何建议。

Answer 1

好吧，您的 CSS 会覆盖通过 HTML 属性设置的宽度和高度，因此固有的图像尺寸开始发挥作用，而这些 是 1×1 像素。因此设置height:auto 无论如何都会自然生成方形图像。

如果您事先知道图像的纵横比（假设您使用的那些宽度和高度 HTML 属性值不是完全任意的，那么您似乎知道了——否则，几行服务器端代码就可以从图片文件，如果需要更动态），那么您可以使用所谓的“padding-top hack”来创建一个占位符，该占位符将使用正确的纵横比。