【问题标题】:CSS Solution to image rendering图像渲染的CSS解决方案
【发布时间】:2010-07-17 00:42:22
【问题描述】:

我在网站上有一张可缩放的图片。当图像被放大到很大程度时,它会显得非常锐利和丑陋。

我尝试使用图像渲染:opimizequality,optimizespeed CSS,但没有奏效。

还有其他出路吗。

谢谢

【问题讨论】:

  • 您在哪个浏览器中尝试过?
  • firefox...如果它只适用于firefox我没关系

标签: css image-manipulation


【解决方案1】:

根据image-rendering on MDCimage-rendering 目前仅在 Firefox 3.6 中支持。类似的属性 -ms-interpolation-mode 可用于 IE7 和 IE8。其他浏览器似乎还没有这个功能。

作为latze mentioned,您最好的办法是编辑图像本身,将其缩放到您需要的级别。我不确定,但您可以尝试使用<canvas> 来执行您想要的插值。

【讨论】:

    【解决方案2】:

    我会简单地编辑图片而不是 CSS。

    尝试逐步放大图片,同时确保图片没有“像素化”(我们用丹麦语称呼它,不确定它是否正确英文)。

    这可以在从 The Gimp-shop 到 Photoshop 的各种图像编辑程序中完成。

    【讨论】:

    • 哦!我刚刚再次阅读了这个问题并意识到我已经回答了这个问题,就好像你的问题是放大时图片变得不清晰 - 抱歉:)
    【解决方案3】:

    图像的大小不应该调整那么多。将图像想象成一个图形,其中每个像素都是图形中的一个正方形。如果你拉伸图像,你实际上是在拉伸像素。一些程序尝试用他们认为适合那里的像素填充这些像素,其他程序只是使像素更大,而其他程序只是用相同的像素填充周围区域以赋予它一种发光的效果.缩小图像尺寸虽然效果更好,但也会产生相同的效果,因为您只是切掉像素而不是添加它们。我见过的大多数程序都会将像素挤压在一起,结合这些像素中的任何颜色。如果你有一个高细节的图像,那么砍掉像素会让它看起来很糟糕。没有真正安全的方法来确定需要保留哪些像素以保持整体图像完好无损。大多数具有缩放功能的网站都有一个更大的图像,该图像已被缩小,它们允许您缩放以查看更大图像的详细信息。有的甚至会分别获得大量详细的图像和较小的预览图像。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-01-12
      • 1970-01-01
      • 2015-07-22
      • 1970-01-01
      • 2021-07-15
      • 2019-07-21
      • 2015-03-24
      相关资源
      最近更新 更多