Есть картинка-заглушка, выполняющая роль прелодера загружаемой картинки. Размеры загружаемой картинки известны и выведены в теге. Я так-же сделал у тега 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;
}
Комментариев нет:
Отправить комментарий