CSS圖片縮放

我正在編寫一個書翻頁，我用CSS，JavaScript和HTML翻頁。它工作得很好，除了這一件事。CSS圖片縮放

每個圖像都有一個塊級的父級。塊級別父級的維度與圖像的比例相同，但縮小到適合窗口內部。每張圖片的寬度均爲100％。和高度：100％;聲明使其直接適合塊級別的父級。

現在，這個工程很好，但是當我開始滑動頁面時，動畫的速度非常緩慢，因爲我縮小了圖像的比例。如果我從圖像中刪除寬度和高度聲明，則動畫平穩運行，但圖像超出塊級父級的維度。

我能做些什麼來解決這個問題？使用新維度創建新圖像不是一種選擇，因爲我希望圖像適合每個屏幕分辨率。

動畫只是在緩慢以下瀏覽器/ OS'es： Opera 10的，蘋果的Chrome 6，蘋果火狐3中，Windows

的Safari 5和Mac和IE7的Firefox 3在Windows處理動畫效果非常好，但是有一些瀏覽器，在縮小圖像時會導致性能下降。

2010-09-13 John

我不確定我是否完全遵循，但它是加載速度慢的圖像還是動畫？ – hookedonwinter 2010-09-13 22:18:42

這是動畫本身。當從一個頁面轉換到另一個頁面時，如果圖像縮小，在一些瀏覽器中非常緩慢和不靈活。 – John 2010-09-13 22:20:27

如果您可以使用服務器端處理，您可以爲每個用戶縮放定製圖像，但是我認爲這對於您的應用程序來說是不可能的？ – Gus 2010-09-13 22:21:39

我不確定這是否會在您的用例中起作用，但是您是否嘗試將圖像/塊設置爲display: absolute或display: fixed？

由於絕對和固定元素不在流動中，因此當它們的屬性發生變化時，它們不會引起迴流，因此可以根據具體情況大幅幫助加快速度。

我們能否看到一些小小的代碼，或者一個活生生的例子？

2010-10-01 10:39:34 Pauan

某些瀏覽器在縮放圖像時速度很慢。根據我的經驗，Chrome 8在這方面最差，比調整大圖像時大約比FF3.6慢5倍。

您可以使用Canvas作爲支持它的瀏覽器的解決方法。它在實際縮放（還）時速度並不快，但它可以讓你保證在渲染過程中你只能縮放圖像一次，當它們被加載時，而不是一遍又一遍。

2010-12-11 20:27:20

回答