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

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

0 голосов
/ 07 января 2011

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

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

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

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

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

-webkit-transform:scale(0.8);

А потом при наведении увеличил: 

-webkit-transform:scale(1.2);

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

Что я хочу:

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

Кто-нибудь? Желательно элегантное решение, которое не требует прослушивания браузера или JavaScript, но все ответы приветствуются.

1 Ответ

1 голос
/ 14 января 2011

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

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

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

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

...