CSS 图像缩小
我正在制作一本翻书书，其中使用 CSS、JavaScript 和 HTML 翻页。除了这一件事之外，它工作得很好。
每个图像都有一个块级父图像。块级父级的尺寸与图像具有相同的比例，但会缩小以适合窗口内部。每个图像的宽度：100%；高度：100%；声明使其直接适合其块级父级。
现在，这效果很好，但是当我开始滑动页面时，动画非常慢且滞后，因为我缩小了图像。如果我从图像中删除宽度和高度声明，动画会顺利运行，但图像会超出其块级父级的尺寸。
我可以做什么来解决这个问题？创建具有新尺寸的新图像不是一个选项，因为我希望图像适合每个屏幕分辨率。
动画仅在以下浏览器/操作系统中速度较慢： Opera 10、苹果机 Chrome 6、苹果电脑 Firefox 3、Windows
Safari 5 和 Mac 上的 Firefox 3 以及 Windows 上的 IE7 可以很好地处理动画，但有些浏览器在缩小图像时性能会受到影响。
I'm putting together a book flip where I flip pages using CSS, JavaScript and HTML. It works very well, except for this one thing.
Every image has a block-level parent. The block-level parent's dimensions has the same ratio as the image but it's scaled down to fit inside the window. Every image has a width:100%; and height:100%; declaration making it fit directly inside its block-level parent.
Now, this works great but when I start sliding the pages the animation's VERY slow and laggish because I scale the images down. If I remove the width and height declaration from the images the animation runs smoothly but the images exceed their block-level parent's dimensions.
What can I do to fix this? Creating a new image with new dimensions isn't an option since I want the images to fit inside every screen resolution.
The animation is only slow in the following browsers/OS'es:
Opera 10, Mac
Chrome 6, Mac
Firefox 3, Windows
Safari 5 and Firefox 3 on Mac and IE7 on Windows handle the animation very well but there are some browsers, where the performance gets killed when scaling down images.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不确定这是否适用于您的用例，但是您是否尝试将图像/块设置为
display:absolute或display:fixed？由于绝对元素和固定元素不在流程中，因此当其属性发生变化时，它们不会导致回流，因此根据具体情况，这可以极大地帮助加快速度。
我们可以看一些代码，或者一个活生生的例子吗？
I'm not sure if this will work in your use-case, but have you tried setting the images/blocks to
display: absoluteordisplay: fixed?Because absolute and fixed elements are not in the flow, they do not cause reflows when their properties change, so that can drastically help speed things up, depending on the circumstances.
Could we see a little code, or maybe a live example?
有些浏览器在图像缩放方面非常慢。根据我的经验，Chrome 8 在这方面最差，在调整大图像大小时比 FF3.6 慢约 5 倍。
您可以在支持 Canvas 的浏览器上使用 Canvas 作为解决方法。它的实际缩放速度（目前还）并不快，但它可以让您保证在加载图像时仅缩放图像一次，而不是在渲染期间一遍又一遍地缩放图像。
Some browsers are very slow at image scaling. Chrome 8 is the worst at this, in my experience, being about 5x slower than FF3.6 when resizing large images.
You can use Canvas as a workaround on browsers that support it. It's not faster at the actual scaling (yet), but it lets you guarantee that you only scale the images once, when they're loaded, instead of over and over during rendering.