图像缩放和动画改进答案

【问题标题】：Image scale and animation improvement图像缩放和动画改进
【发布时间】：2013-07-02 20:37:14
【问题描述】：

有人可以知道如何将img 元素缩放（宽度）到屏幕的 100% 并在动画中保持出色的表现吗？

在我的第一个示例中，我将width 属性设置为100%。出于测试目的，我在这个小提琴中制作了一个动画循环来查看性能块：http://jsfiddle.net/tXXmm/1/。当图像被父元素的overflow 隐藏时，我有 35fps。

当我删除 width 属性时，我有 60fps 到同一个例子：http://jsfiddle.net/tXXmm/2/

我需要知道是否有某种方法可以获得与第一个示例相同的结果，以及第二个示例的性能。请考虑：图像分辨率是可变的。只有父元素有height: 500px;。另外，我的设计是 fluid 设计（这就是为什么我的图像的宽度需要缩放屏幕的整个宽度）。

感谢任何解决方案（PHP、JS、CSS...）。谢谢！

【问题讨论】：

如何通过javascript获取窗口的宽度，然后将其设置为图像。
嗨@stackErr，感谢您的回答！它似乎没有改变图像的性能（小提琴中的 35fps）。这是因为图像没有我猜的原始宽度（？）
如何在 HTML 中使用真实高度/宽度设置属性并在 CSS 中重置宽度？至少浏览器不需要完全上传图片来知道它的大小。 jsfiddle.net/tXXmm/4（如果这是你的答案，我会做一个）
您好@GCyrillus，感谢您的评论！在您的小提琴中，帧速率仍为 30/35fps。自己检查一下，当您在 CSS 中删除“宽度”属性时，帧速率会上升到 60fps。事实上，我需要得到这样的性能，但图像要达到父容器宽度的 100%。编辑：这是我用你的更新jsfiddle.net/tXXmm/5进行的测试
听起来我错过了阅读，对不起:)

【解决方案1】：

好的，我发现了一些东西。我添加了transform: translateZ(0);，现在我在 Google Chrome 中获得了 60fps！ http://jsfiddle.net/tXXmm/7/.

似乎此属性会强制在 webkit 浏览器中激活 GPU 加速。这似乎是一个很好的建议。感谢您的帮助！

【讨论】：