数据 URI 图像大小（自动高度）
Data URI image sizing (auto height)
我使用 Unveil.js 延迟加载图像。为了保存 time/space，我使用了 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> 标记中的 width/height 属性或 CSS 规则如何，数据 URI 图像始终保持正方形。这会导致在较慢的服务器上跳来跳去，因为 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”来创建一个占位符，该占位符将使用正确的纵横比。
我使用 Unveil.js 延迟加载图像。为了保存 time/space，我使用了 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> 标记中的 width/height 属性或 CSS 规则如何，数据 URI 图像始终保持正方形。这会导致在较慢的服务器上跳来跳去，因为 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”来创建一个占位符，该占位符将使用正确的纵横比。