Размер изображения 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, что является проблемой для чувствительных сайтов.

Таким образом, если выше тег изображения находится внутри <div> с шириной 50%, а <div> «ы вычисляется ширина 500px (общая ширина окна просмотра 1000px), то изображение будет переполнение <div>, если я не использовать max-width: 100%; height: auto;, а затем, не -data URI-изображение будет правильно масштабировать и поддерживать соотношение сторон.

Однако изображение URI данных всегда остается квадратным, независимо от атрибутов width/height в теге <img> или CSS. Это приводит к некоторому переходу на более медленные серверы, потому что изображение, которое становится ленивым, загружаемым 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», чтобы создать заполнитель, который будет использовать правильное соотношение сторон.