如何使用CSS归档完美像素的像素艺术缩放？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用CSS归档完美像素的像素艺术缩放？相关的知识，希望对你有一定的参考价值。

我想使用CSS升级我的pixelart精灵，并使它看起来清晰。但是我有3个关于pixelart和CSS的问题：

  1. 默认情况下，升级是模糊的（已经解决了很多次）
  2. CSS px不是屏幕像素的大小（显然无法解决）
  3. 我找不到以整数倍数来放大img的方法，因此像素保持完美的平方（我很难做到）

One of my failed attemps

答案

由于您需要按整数倍放大图片以使像素保持正方形，并且由于CSS不能为您提供“ 1像素的真实大小”，因此您必须运行自己的计算，具体取决于最终结果用户的视口像素宽度。

这里是一个例子：

.pixel-perfect 
  image-rendering: crisp-edges; /*no blur*/

  /*pixel-perfect upscaling of a 15px wide image on a 800px wide viewport by a factor of 4x */
  width: calc(calc(100vw / calc(800 /*viewport screen pixel width, needs to be equivalent to 100vw for it to look best*/ / 4 /*factor*/)) * 15 /*pixelart width*/) 

<html>
  <body>
    <img class="pixel-perfect" src="https://imgur.com/3gtdA0P.png"/>
  </body>
</html>

以上是关于如何使用CSS归档完美像素的像素艺术缩放？的主要内容，如果未能解决你的问题，请参考以下文章

有趣的CSS像素艺术

如何强制画布大小以像素为单位的窗口的实际大小，而不考虑浏览器的缩放因子？

web移动端常见问题

缩放会导致像素化矢量绘图

如何使用 af_imageAspectScaled 缩放到所需的像素大小

移动端常用适配（完美解决）