html - CSS 翻译百分比导致图像模糊

Question

我遇到过这个非常烦人的问题。

当您使用转换对齐图像时，基于转换百分比会导致图像稍微模糊。这仅适用于百分比对齐方式

考虑这个 css:

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

尝试过的解决方案:

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

也许有人有解决方案？

Updated: Js Fiddle我用图像更新了 js fiddle ，以便更好地看到差异。这在摄影中非常引人注目。

示例图片:

谢谢!

Answer 1

试试这样的translateX(calc(-50% + 0.5px))