Макет CSS-изображения перед загрузкой изображения

Для моего мобильного сайта я хочу показывать изображения разных, но известных высот/ширины с двумя ограничениями:

  • Изображение должно занимать всю ширину браузера
  • Высота должна масштабироваться (вниз или вверх) соответственно, чтобы сохранить пропорции

Как только браузер загрузит изображение, это очень просто со следующим CSS:

<img src="myImageURl" style="width: 100%; height: auto;" />

Но поскольку загрузка изображения занимает какое-то время, я хочу, чтобы браузер отображал изображение до его загрузки. Таким образом, браузер не нуждается в повторной передаче страницы, как только он извлечет изображение. Я пробовал следующие подходы, которые не удалось:

// The image is not layouted before fetched
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /> 

// The image is layouted, but wrong: height is not proportional to the width anymore
<img src="myImageURl" style="width: 100%; height: myImageHeight;" />

Мне понравилась бы какая-то помощь здесь. Но, пожалуйста, в CSS, я не хочу использовать Javascript/jQuery, если мне это не нужно.

UPDATE

Думаю, я не единственный, у кого эта проблема: https://graphicdesign.stackexchange.com/info/3274/fluid-images-how-to-set-width-and-height

Ответы

Ответ 1

Как уже сказал Пит, вы не можете делать никаких (автоматических) вычислений до загрузки изображения, поэтому браузер знает его ширину и высоту.

Но так как вы можете заранее определить соотношение сторон изображения, вы можете попробовать "обходной путь", добавив дополнительный элемент-заполнитель вокруг изображения - и воспользуйтесь тем фактом, что padding значения, заданные в процентах, всегда рассчитываются на основе ширины элемента, даже для padding-top/-bottom.

Это может выглядеть примерно так:

<div style="position:relative; width:100%; height:0; padding-top:50%;">
  <img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>

Это элемент div без высоты, но padding-top - это даст ему фактическую "высоту" 50% от рассчитанной 100% ширины. (Это было бы для изображения с соотношением сторон 2:1 - для 3:1 значение верхнего поля должно было бы составлять 33.333% соответственно и т.д., В основном height/width*100.)

Это должно охватывать наш заполнитель еще до загрузки изображения.

Само изображение позиционируется абсолютно внутри этого относительно позиционированного заполнителя - это гарантирует, что он будет отображаться в том же положении в документе.

Единственное, что может быть проблематичным, это округление, которое должно иметь место для значений с десятичными точками - 33.333% из 1000 пикселей будет 333,33 пикселя, а браузер должен округлить до 333 пикселей. Если изображение с измененным размером имеет фактическую высоту 334 пикселей, оно просто выйдет из области, где разделитель-разделитель будет зависеть от этого одного пикселя. Может зависеть от фактического расположения (и вашего фетиша для идеальной точности пикселей), независимо от того, приемлемо это или нет.