CSS用百分比转换会导致图像模糊 [英] CSS translate with percentage causes blurred image

问题描述

我遇到了这个非常烦人的问题.

I've encountered this very annoying problem.

将图像与变换对齐时，基于其转换百分比会导致图像略微模糊.这仅具有百分比对齐

When you align an image with transform, translate percentage based it causes the image to blur slightly. This is only with percentage alignment

考虑此CSS:

img {
  display: block;
  height: auto;
  max-width: 100%;
  transform: translate(1%,1%); 
}

尝试过的解决方案:

1. translate3d修复
2. 透视修复
3. translateZ修复

也许有人有解决办法?

已更新:Js Fiddle 我用图像更新了js小提琴，以更好地看到它们之间的区别.在摄影中非常引人注目.

Updated: Js Fiddle I updated the js fiddle with an image to better see the difference. It is very noticeable in photography.

示例图片:

谢谢！

推荐答案

尝试类似的方法 translateX(calc(-50% + 0.5px))

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