【问题标题】:how to improve resized image quality in Internet explore 9/10 and FF如何在 Internet Explorer 9/10 和 FF 中提高调整大小的图像质量
【发布时间】:2013-10-30 21:35:27
【问题描述】:

调整图像大小时图像质量受到干扰。 这是代码

<img height="60px" src="http://www.clker.com/cliparts/8/3/3/4/1195445190322000997molumen_red_round_error_warning_icon.svg.med.png" alt="logo" />

如何在 IE 和 FF 中改进它? http://jsfiddle.net/CdktR/1/

【问题讨论】:

    标签: css image internet-explorer


    【解决方案1】:

    众所周知,在浏览器中调整大小是不可靠的(尽管某些浏览器,如 Chrome,比其他浏览器处理得更好)。您可以通过将其添加到您的 CSS 来稍微影响它:

    img { -ms-interpolation-mode: bicubic; -moz-image-rendering: crisp-edges; }
    

    但到目前为止,最好的选择是为网页提供大小合适的图像版本。如果您想稍后更新图像会很痛苦,因为您需要更新多个文件,但我能想到的唯一其他选择是使用 SVG。

    您可以查看browser support for SVGs here;简短的版本是,除非您的目标是 IE8 及更低版本,否则应该没问题。

    【讨论】:

    • 如果你检查jsfiddle,问题只在IE9和IE10
    • 那么我建议使用 SVG,并为 IE 8 及更低版本提供(调整大小的)图像回退。
    • 使用 svg 得到同样清晰的结果
    • 那么你需要使用调整大小的图形。
    • 图像渲染:-moz-crisp-edges;必须是 -moz-image-rendering: 清晰边缘;
    【解决方案2】:

    mozilla 有一些关于这个主题的好东西。您可能想要使用图像渲染属性和 -ms-interpolation-mode,具体取决于您的具体目标。

    https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

    【讨论】:

      猜你喜欢
      • 2012-08-09
      • 2011-12-16
      • 2013-02-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-03-10
      • 2013-09-30
      • 1970-01-01
      相关资源
      最近更新 更多