数据 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>

的计算宽度为 500px（总视口宽度为 1000px），那么图像将溢出

<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”来创建一个使用正确宽高比的占位符。