使用变换:缩放会导致图像模糊 [英] Using transform: scale results in blurry images

问题描述

在目录视图(在线商店)中，我们使用javascript获取产品的不同视图并使用CSS缩小图像. 连续3个/4个或5个/

In our catalog view (online store) we use javascript to get different views of the products and scale the images down with CSS. 3 in a row / 4 or 5/

默认视图为4:

-webkit-transform: scale(0.83);
-moz-transform: scale(0.83);
-ms-transform: scale(0.83);
-o-transform: scale(0.83);
transform: scale(0.83);

一切正常，但野生动物园中的图像看起来非常模糊.有没有办法改善野生动物园的渲染? 图片较大: http://i.stack.imgur.com/NaFeB.jpg

Everything works but the images look very blurry in safari. Is there a way to improve the rendering for safari? Bigger Image: http://i.stack.imgur.com/NaFeB.jpg

推荐答案

如果您在safari中重置模糊滤镜，它将起作用:

it works if you reset the blur filter in safari:

-webkit-filter: blur(0px); 

所有浏览器的示例:

filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

希望有帮助

这篇关于使用变换:缩放会导致图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！