Как сохранять четкость фотографии при увеличении/уменьшении?

Такие дела.
Есть страница, где разбросаны круглые фотографии.
При наведении они увеличиваются, при клике быстро уменьшаются и исчезают.
Клик происходит быстро и там сложно что либо уловить по качеству.

Но что делать с увеличением? Увеличение у меня реализовано через transform: scale()
Я беру фотографию большего размера, чтобы при увеличении она была четкой. Тогда в статическом положении фотография размытая - как это исправить?

Может использовать другие методы увеличения, но какие?

PS: фотографии сами по себе в высоком качестве - в 2x размере для ретина-дисплеев
  • Вопрос задан
  • 678 просмотров
Решения вопроса 1
@denisbookreev Автор вопроса
В общем, решил проблему так: берем большее изображение по размеру и с помощью transform меняем размер с шагом 0.2 - так качество не теряется
Я, таким образом, просто нарезал картинки с размер 1.2 относительно нужного, а в стилях просто прописал transform: scale(0.8), а при увеличении transform: scale(1) - потерь в качестве нет.
Либо можно просто для ретины взять вдвое большую картинку и так же с шагом 0.2 увеличивать/уменьшать
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Вьюхи делай маленькие и при наведении скриптом подсовывай большую.
Ответ написан
Правильный вариант с двумя изображениями! одно - миниатюра, второе - оригинальное!
Я допустим всегда в своих проектах использую скрипт генерации миниатюра на лету: phpthumb.sourceforge.net
Получается фактически имея одну ссылку на изображение, у нас получается дополнительное, меньшего веса и размерности
Ответ написан
Ваш ответ на вопрос

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

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