最新 Webkit（包括 Safari 5.1）中的图像缩放效果更差？
我一直在研究一些严重依赖于使用 CSS/JavaScript 缩小大图像的项目。在 Safari 5.1 发布之前，我注意到 Safari 中的图像漂亮且平滑，但在 Chrome 中有点锯齿状。现在 Safari 5.1 似乎和 Chrome 一样糟糕。
image-rendering CSS 属性似乎没有什么区别。大多数关于它的在线帖子似乎来自那些想要最近邻平滑而不是双三次的人，而我需要相反的：让我的图像更平滑。
我附上了两张图片。一张显示 Safari 中的缩放，另一张显示 Firefox 中的缩放。如果您观察模特左侧的手臂，您会特别看到其中的差异。
I've been working on something that relies heavily on large images being scaled down with CSS/JavaScript. Before Safari 5.1 came out, I noticed that the images were nice and smooth in Safari, but kind of jagged in Chrome. Now Safari 5.1 seems to be just as bad as Chrome.
The image-rendering CSS property doesn't seem to make a difference. Most posts online about it seem to be from people wanting nearest-neighbor smoothing instead of bicubic, while I need the opposite: getting my images to be smoother.
I attached two images. One shows scaling in Safari and the other one in Firefox. If you look at the model's arm on the left you can see the difference there especially.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我猜测使用 CSS3
transform可能会产生更好的结果，因为它使用硬件加速。因此，我创建了一个小提琴，可以使用 csswidth和height以及 CSS3transform缩放一些图像（点击此处查看）检查一下并确保，但我的眼睛不好，也许显示器不好，我没有'没发现 css 之间有什么区别缩放或-webkit-transform:scale()缩放版本。请查看小提琴，如果您发现任何差异，请告诉我。小提琴： http://jsfiddle.net/EWf25/1/embedded/result/
I'm guessing using CSS3
transformmay produce better result because it uses hardware acceleration. So I created a fiddle that scale some images with both csswidthandheightand CSS3transform(click here to see) to check it out and make sure but I don't have a good eye or maybe monitor, I didn't saw any difference between css scaled or-webkit-transform: scale()scaled versions. Please look at fiddle and let me know if you saw any difference.Fiddle: http://jsfiddle.net/EWf25/1/embedded/result/
尝试使用以下图像渲染值：
Try these values for image-rendering: