У меня есть концептуальный вопрос о фотогалереях вроде этого:
http://www.nikesh.me/demo/image-hover.html
Если вы откроете его в браузере, который поддерживает переходы CSS (например, Chrome), он будет плавно масштабировать наведенное изображение, в то время как увеличенная версия останется высокого качества.
Это достигается путем показа немасштабированных изображений в немного уменьшенной версии, чем они есть на самом деле, по сути, масштабирование показывает их в их истинных размерах.
Итак, обычные изображения сначала уменьшаются:
-webkit-transform:scale(0.8);
А затем при наведении масштабируется:
-webkit-transform:scale(1.2);
Мой вопрос: как первоначальное уменьшение должно работать для браузеров, которые не поддерживают этот метод уменьшения? Попробуйте открыть эту галерею в IE, чтобы понять, что я имею в виду, она показывает изображения без уменьшения, что делает их слишком большими и тем самым нарушает макет.
Что я хочу:
- Полный эффект в браузерах, которые его поддерживают. Важно, чтобы увеличенная версия оставалась качественной.
- Никакого эффекта для браузеров, которые его не поддерживают, но четкий исходный размер, так что макет не нарушается.
- Он должен работать для обеих ориентаций изображения, а также может быть разная ширина и высота изображения.
Кто угодно? Предпочтительно элегантное решение, которое не требует обнюхивания браузера или javascript, но все ответы приветствуются.