-1

我想用 css 升级我的像素艺术精灵，让它看起来很清晰。但是我有 3 个关于像素艺术和 css 的问题：

  1. 默认情况下，放大是模糊的（已经解决了很多次）
  2. CSS px 不是屏幕像素的大小（显然无法解决）
  3. 我找不到一种方法将我的 img 放大一个整数因子，所以像素保持完美的正方形（我很难做到）

我失败的尝试之一

4

1 回答 1

0

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

这是一个例子：

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

  /*pixel-perfect upscaling of a 15px wide image on a 1920px wide viewport by a factor of 4x */
  width: calc(calc(100vw / calc(1920 /*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>

于 2020-06-07T09:39:20.593 回答