Как сделать прелодер изображения, сохраняющий пропорции оригинального файла?

#html #css #вёрстка #адаптивная_верстка

Есть картинка-заглушка, выполняющая роль прелодера загружаемой картинки. Размеры
загружаемой картинки известны и выведены в теге. Я так-же сделал у тега img max-width:100%,
чтобы картинка не выходила за края страницы на маленьких экранах. 

С оригинальной картинкой все работает хорошо, (чтобы сохранялись пропорции, я написал
height:auto) Но когда ставим заглушку 1х1, пропорции картинки берутся соответственно
1 к 1, а не те, что указаны в теге. Если убрать height:auto ситуация все равно не решается,
т.к. размер остается 200, а должен быть меньше.



img{
  max-width:100%;
  height:auto;
}





Есть ли способ сделать здесь масштабирование с сохранением необходимых пропорций,
не прибегая к JS?

Все картинки разных размеров, есть возможность что-то сделать при подстановке заглушек.
Некоторые картинки меньше экрана, некоторые — больше. Кроме картинок ничего нет, вокруг
теги 
 с текстом
    

Ответы

Ответ 1

Решил задачу таким образом. 

Можно на лету создавать изображения в формате SVG того-же размера.




Полученный код закодировать и вставить в атрибут src изображения.




Пример реализации на JS:



$('img').each(function() {

  //получаем размер изображения
  iw = $(this).attr('width')
  ih = $(this).attr('height')
    //Проверяем, есть ли размеры
  if (iw !== undefined && ih !== undefined) {
    //Создаем SVG с размерами изображения:
    svg = '';
    //Вставляем картинку прямо в тег:
    $(this).attr("src", "data:image/svg+xml," + encodeURI(svg));
  }

})
img {
  max-width: 100%;
  height: auto;
  background: #03ded7;
}




Ответ 2

А что если через background-image, и background-size:cover


Ответ 3

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

Например, картинка в формате PNG с пропорциональными нужным вам размерами 15х2 пикселей
имеет размер лишь 95 байт. Такую картинку лучше будет подключать по схеме data:, иначе
вы на HTTP заголовки потратите больше. (Картинка полного размера занимает лишь немного
больше - 144 байта.)

Если же HTML код всё-таки можно поменять, то тут вариантов множество.