我使用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），则图像将溢出{{ 1}}除非我使用<div>，否则非数据URI图像将正确缩放并保持其宽高比。
但是，无论max-width: 100%; height: auto;标记或CSS规则中的宽度/高度属性如何，数据URI图像始终保持方形。这导致一些人在较慢的服务器上跳转，因为Unveil.js延迟加载的图像并不总是正方形。
我设置了一个快速小提示来展示尺寸差异（没有Unveil.js）：http://jsfiddle.net/silb3r/7bnfqkko/1/
还有一个使用Unveil.js：http://jsfiddle.net/silb3r/2eff5thm/（您可能需要手动限制连接以查看问题）
是否有人熟悉确保数据URI保持原始图像宽高比的方法？最好不要添加更多jQuery，但我对任何事情都持开放态度。
感谢您提出任何建议。
答案 0 :(得分：1)
好吧，你的CSS会覆盖通过HTML属性设置的宽度和高度，因此内在的图像尺寸起作用，而那些 1×1像素。因此设置height:auto自然会产生方形图像，无论如何。
如果您事先知道图像的宽高比（并且您似乎这样做，假设您使用的宽度和高度HTML属性值并非完全随意 - 否则，几行服务器端代码可以从中读取它们如果图像文件需要更加动态，那么您可以使用所谓的“padding-top hack”创建一个使用正确宽高比的占位符。