@ICUI4CU

Как зарезервировать место для отзывчивого изображения?

Для изображений рекомендуется задавать атрибуты width и height, чтобы пока оно не загрузилось браузер зарезервировал для него место и контент не прыгал. Как это реализовать в адаптивной верстке, когда для изображений задается правило max-width:100%;height:auto ?
  • Вопрос задан
  • 432 просмотра
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Делать временные заглушки/плейсхолдеры (называйте как хотите) для картинок с теми же пропорциями. Удобно для этих целей использовать SVG - если сервер знает размер картинки, то можно сгенерировать прямоугольник и вставить SVG с ним в то место, где должна быть картинка, а потом саму картинку абсолютным позиционированием положить на нее сверху. Имеет смысл эти заглушки генерировать заранее (один раз) для загружаемых на сервер картинок. В некоторых случаях можно еще сильнее заморочиться и сделать все не только функционально, но и красиво.
Ответ написан
Комментировать
wapster92
@wapster92 Куратор тега CSS
lazy load + низковесный плейсхолдер
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы