圖像縮放和動畫改進

有人可以知道如何縮放（寬度）到屏幕的100％，並保持動畫中的大型表演？圖像縮放和動畫改進

在我的第一個例子中，我將width屬性設置爲100%。爲了測試目的，我在這個小提琴中製作了一個動畫循環來查看性能塊：http://jsfiddle.net/tXXmm/1/。我有35fps當圖像被父元素的overflow隱藏。

當我刪除width財產，我有60fps的相同的例子：http://jsfiddle.net/tXXmm/2/

enter image description here

我需要知道，如果有一些方法來得到相同的結果作爲第一個例子，與第二個例子的表現。請考慮：圖像分辨率是可變的。只有父元素有height: 500px;。此外，我的設計是流體設計（這就是爲什麼我的圖像的寬度需要縮放屏幕的整個寬度）。

任何解決方案讚賞（PHP，JS，CSS ...）。謝謝！

2013-07-04 DrSAS

如何通過JavaScript獲取窗口的寬度，然後將其設置爲圖像。 – stackErr

嗨@stackErr，謝謝你的回答！它似乎不會改變圖像的性能（小提琴中的35fps）。這是因爲圖像沒有我想的原始寬度（？） – DrSAS

在HTML中設置屬性與真正的高度/寬度以及CSS中的重置寬度有什麼關係？至少不需要瀏覽器完全上傳圖片以瞭解其大小。 http://jsfiddle.net/tXXmm/4/（如果這你的答案，我會做一個） –

好的，我找到了一些東西。我添加了transform: translateZ(0);，現在我在Google Chrome中獲得了60fps！ http://jsfiddle.net/tXXmm/7/。

看來這個屬性強制在webkit瀏覽器中激活GPU加速。這似乎是一個很好的提示，現在去。感謝您的幫助！

2013-07-04 23:30:38 DrSAS

回答