Возникли проблемы с реализацией -webkit-transform для увеличения изображений в фотогалерее.

У меня есть концептуальный вопрос о фотогалереях вроде этого:

http://www.nikesh.me/demo/image-hover.html

Если вы откроете его в браузере, который поддерживает переходы CSS (например, Chrome), он будет плавно масштабировать наведенное изображение, в то время как увеличенная версия останется высокого качества.

Это достигается путем показа немасштабированных изображений в немного уменьшенной версии, чем они есть на самом деле, по сути, масштабирование показывает их в их истинных размерах.

Итак, обычные изображения сначала уменьшаются:

-webkit-transform:scale(0.8);

А затем при наведении масштабируется:

-webkit-transform:scale(1.2);

Мой вопрос: как первоначальное уменьшение должно работать для браузеров, которые не поддерживают этот метод уменьшения? Попробуйте открыть эту галерею в IE, чтобы понять, что я имею в виду, она показывает изображения без уменьшения, что делает их слишком большими и тем самым нарушает макет.

Что я хочу:

  • Полный эффект в браузерах, которые его поддерживают. Важно, чтобы увеличенная версия оставалась качественной.
  • Никакого эффекта для браузеров, которые его не поддерживают, но четкий исходный размер, так что макет не нарушается.
  • Он должен работать для обеих ориентаций изображения, а также может быть разная ширина и высота изображения.

Кто угодно? Предпочтительно элегантное решение, которое не требует обнюхивания браузера или javascript, но все ответы приветствуются.


css transform webkit
person Fer    schedule 07.01.2011    source источник
comment
IE поддерживает вид масштабирования: zoom. См. msdn.microsoft.com/en-us/ библиотека/ms531189(v=vs.85).aspx   -  person RoToRa    schedule 14.01.2011

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы он работал без использования javascript, то, похоже, единственный метод, который у вас есть, - это отказаться от начального масштабирования с помощью css. Вы захотите сделать это «устаревшим» способом настройки ширины и высоты изображения в разметке.

<img src="yourImageSrc" width="80%" height="80%">

Это позволит вам по-прежнему сохранять свой макет, если пользовательский агент не обновлен.

** Я не знаю, работает ли процент в буквальном определении высоты/ширины. Но вы всегда можете определить необходимое соотношение и подключить его.

person John    schedule 14.01.2011
comment
Я добился некоторого прогресса, но осталось несколько проблем. Действительно, один процент не сокращает его, мне пришлось рассчитать соотношение между фактическим изображением и уменьшенным изображением и использовать его как буквальную ширину и высоту. Это работает. Остаются две проблемы: 1) В Chrome (9) увеличенное изображение имеет низкое качество. Это не то, чего я ожидал, учитывая, что я намеренно загружаю изображения большего размера, чем показываю. 2) FF3.6 правильно увеличивает изображение до высокого качества, но не имеет эффекта анимации. Это не большая проблема, но странно, так как я использую FF 3.6, и это должно поддерживаться с версии 3.5. - person Fer; 14.01.2011
comment
В любом случае, я собираюсь дать вам награду, как только SO позволит мне. Я думаю, что ваш ответ правильный, хотя я, вероятно, откажусь от этой функции, она не работает должным образом ни в одном браузере (анимация + масштабирование высокого качества). - person Fer; 14.01.2011