Для моего мобильного сайта я хочу показывать изображения разных, но известных высот/ширины с двумя ограничениями:
- Изображение должно занимать всю ширину браузера
- Высота должна масштабироваться (вниз или вверх) соответственно, чтобы сохранить пропорции
Как только браузер загрузит изображение, это очень просто со следующим 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