Размер изображения URI данных (автоматическая высота) ⇐ CSS

[Гость]

I use Unveil.js to lazy load images. To save time/space, I use a base64 placeholder image:

Код: Выделить всё

[img]data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7[/img]

The problem I'm experiencing is how the placeholder image gets resized. It seems to always maintain an aspect ratio of 1 which is a problem for responsive sites.
So if the image tag above is inside of a

Код: Выделить всё

with a width of 50% and the

Код: Выделить всё

's calculated width is 500px (total viewport width is 1000px) then the image will overflow the

Код: Выделить всё

unless I use

Код: Выделить всё

max-width: 100%; height: auto;

and then a non-data URI image will correctly scale and maintain its aspect ratio.
However, the data URI image always remains square, regardless of width/height attributes in the

Код: Выделить всё

tag or CSS rules. This causes some jumping around on slower servers because the image that gets lazy-loaded by Unveil.js is not always square.
I set up a quick fiddle to demonstrate the sizing differences (without Unveil.js): http://jsfiddle.net/silb3r/7bnfqkko/1/
And one with Unveil.js: http://jsfiddle.net/silb3r/2eff5thm/ (you may need to manually throttle your connection to see the issue)
Is anyone familiar with a way to ensure that the data URI maintains the aspect ratio of the original image? Preferably without adding more jQuery, but I am open to anything.
Thank you for any suggestions.


Источник: https://stackoverflow.com/questions/287 ... uto-height