CSS масштабирование изображения - PullRequest
Новая
       26

CSS масштабирование изображения

1 голос
/ 14 сентября 2010

Я собираю книгу, где я переворачиваю страницы, используя CSS, JavaScript и HTML.Это работает очень хорошо, за исключением этого.

У каждого изображения есть родительский уровень.Размеры родительского уровня блока имеют то же соотношение, что и изображение, но они уменьшены, чтобы уместиться в окне.Каждое изображение имеет ширину: 100%;и высота: 100%;объявив, что он помещается прямо в родительский уровень блока.

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

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

Анимация медленная только в следующих браузерах / ОС: Opera 10, Mac Chrome 6, Mac Firefox 3, Windows

Safari 5 и Firefox 3 на Mac и IE7 в Windows отлично справляются с анимацией, но есть некоторые браузеры, в которых производительность снижается при уменьшении изображения.

Ответы [ 2 ]

0 голосов
/ 11 декабря 2010

Некоторые браузеры очень медленно масштабируют изображения.По моему опыту, Chrome 8 хуже всего, он примерно в 5 раз медленнее, чем FF3.6 при изменении размера больших изображений.

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

0 голосов
/ 01 октября 2010

Я не уверен, будет ли это работать в вашем случае использования, но вы пробовали установить для изображений / блоков значение display: absolute или display: fixed?

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

Можем ли мы увидеть небольшой код или, может быть, живой пример?

...