Страницы

Поиск по вопросам

пятница, 2 ноября 2018 г.

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

Есть картинка-заглушка, выполняющая роль прелодера загружаемой картинки. Размеры загружаемой картинки известны и выведены в теге. Я так-же сделал у тега img max-width:100%, чтобы картинка не выходила за края страницы на маленьких экранах.
С оригинальной картинкой все работает хорошо, (чтобы сохранялись пропорции, я написал height:auto) Но когда ставим заглушку 1х1, пропорции картинки берутся соответственно 1 к 1, а не те, что указаны в теге. Если убрать height:auto ситуация все равно не решается, т.к. размер остается 200, а должен быть меньше.
img{ max-width:100%; height:auto; }
Есть ли способ сделать здесь масштабирование с сохранением необходимых пропорций, не прибегая к JS?
Все картинки разных размеров, есть возможность что-то сделать при подстановке заглушек. Некоторые картинки меньше экрана, некоторые — больше. Кроме картинок ничего нет, вокруг теги

с текстом


Ответ

Решил задачу таким образом.
Можно на лету создавать изображения в формате 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; }

Комментариев нет:

Отправить комментарий