IE 修复:图像的双三次缩放 Chris Coyier 于 2009年3月17日 DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分! Devthought 前几天提供了一个 CSS 小技巧,绝对值得重复。 它不是新的,它只是一个需要了解的重要小技巧。 它就是这个 img { -ms-interpolation-mode: bicubic; } 如果您使用width或height标签在您的标记中调整图像大小,除非您使用此小片段,否则 IE 会确保它们看起来非常糟糕。 通常,不建议在浏览器中调整图像大小,但当然总有例外。
这是一个很棒的技巧,我以前从未见过使用过 ms 供应商扩展
以前听说过双三次重采样,但从未意识到 IE 可以做到! 谢谢!
哦,不错,很棒的小技巧!
规则第 1 条。 不要在浏览器中缩放图像! :)
这太棒了!
“但当然总有例外。”
其中之一是什么?
通过 cms 进行客户端工作时,存在很多灰色地带,尤其是在客户端“不理解”或不了解如何调整图像大小/好处(无论他们接受多少教育)的情况下。
当您尝试不破坏设计时,它很有用。 然后,您可以在没有任何令人震惊的“我的网站坏了!” 客户端崩溃
当您需要图像的几种尺寸的缩略图时,它很有帮助,并且由于您使用的 CMS,您不想创建和管理 5 个相同图像的不同副本。 您可以缩放缩略图并为所有实例下载一个图像,这些图像的大小略有不同。
您当然不希望高分辨率图像被压缩,但它确实可以节省带宽并节省服务器调用以重复使用小图像。
Chris C. 此技巧仅适用于 .jpg 和 .gif(无透明度)。
感谢提示!
文本调整大小。
使用 EM 测量图像。 在我目前正在处理的一个案例中,我必须创建一个文本调整器,并且图像需要随着文档的其余部分一起缩放。
谢谢。 这些信息非常有用。 我已将本文添加书签并推文。
非常感谢 Chris..
从不知道有这样的技巧存在..
谢谢。 这在画廊中很有用……您甚至可以只上传图像的大版本,即使是缩略图!
我真的很想知道微软的谁认为这是合理的默认设置……
很棒的技巧!
实际上,几周前我花了大约半天的时间试图在 IE 中实现“更平滑的缩放”,然后才偶然发现了相同的代码——真是一个启示。 虽然我同意图像应该只作为最后手段在浏览器中缩放,但任何使用 Imageflow 或 Galleria 的人都应该绝对包含这个小宝石。 感谢 Chris。(以及 schill 在 Code.Flickr 上的文章)
从未听说过这个。 伟大的发现,Chris!
IE 具有(在“Internet 选项”下)加载应用于每个页面的默认样式表的功能。 如果您在此文件中创建具有此规则的样式表文件,并将 IE 设置为加载此文件作为默认样式表,则可以为 IE 中的所有图像启用双三次缩放。
我从这个网站上得到的最好的 CSS 技巧。
希望我几年前就知道这个!
感谢您的精彩提示。 我的商业伙伴在调整她博客文章的图像大小方面遇到麻烦,所以她只是让 Word Press 来做。 它们在 IE 上经常看起来很糟糕,我不得不清理它。 不再是了! @TraceyHolinka
这是一个很好的提示,希望 IE8 将其设为默认值。 我无法想象为什么任何人会想要当前的行为。
我在工作场所使用 CMS,因此这可能变得很方便,因为我们的大多数客户可能都通过浏览器缩放调整了图像大小。 感谢 CC 和 Devthought :)
“-ms-interpolation-mode” 似乎仅限于 IE 7,您将需要一个用于 IE 6 的 AlphaImageLoader 过滤器。
什么?! 我从未想过你可以做到这一点。 为什么 IE7 默认不这样做? 有什么正当理由不希望图像平滑缩放吗?
很棒的技巧!
它不错,但它不会在 CSS(W3C CSS 验证器)上验证
它不会验证,因为它不是有效的 CSS。 它是 Internet Explorer 的专有 CSS。 就像 -moz-border-radius 用于 Firefox 一样。
如果您想保持主 CSS 文件的整洁,请将专有 CSS 放入仅限 IE 的样式表中。 或创建一个“脏样式表”,其中包含所有专有样式。
出色的工作! 谢谢!
不错,但是:为什么您要客户端缩放图像而不是从服务器提供缩放版本?
您无法始终这样做。 我认为即使 WordPress 也会缩放图像。
我从未听说过“-ms-interpolation-mode”,而且我很少缩放图像。
无论如何……感谢发布此内容。 干杯!
如何不调整图像大小? 它会降低性能,而且它们总是会变得很糟糕,不需要任何 HACKS,万岁
我从未相信过在浏览器中调整图像大小,但正如 Josh N. 在他的评论中所说,如果它是同一个图像,只是大小略有不同,那么这样做是有意义的,可以节省空间和带宽。
很酷的小技巧。 感谢分享!
太棒了!但我注意到它在IE6中效果不佳或根本不起作用,其他人注意到这个问题了吗?
这是我一段时间以来得到的最好的提示,因为很多葡萄牙人出于无知仍然使用IE。
非常简单但功能强大的提示!
谢谢,很棒的提示。
不幸的是,这似乎会导致一些性能问题(尤其是在与JavaScript结合使用时)。
但如果谨慎使用,这是一个很好的快速修复。
很好,Coyier先生,当你无法保证所有图像都将被客户端正确调整大小时,这确实很有用。
干杯
很棒的提示,伙计,感谢你的提醒!
很棒的提示,有没有办法对PNG执行此操作?
JohnB 说到了点子上……我目前正在创建一个 JavaScript 图库,当在未启用 JS 的机器上查看时,它将通过 HTML 调整我的图像大小,以便我可以在我的布局中很好地显示它们。
当 JavaScript 启动时,它只需获取所有图像,替换每个图像标签中的大小,并在页面上的其他位置组装我的图库。
非常方便。感谢此提示!
很棒的提示,对我来说非常有用
简洁的提示!
有关如何在网站中集成大型图像的不同方法,请查看“内联多尺度图像替换”技术
http://gasi.ch/blog/inline-multiscale-image-replacement/
作为一项不错的附带效果,您可以发布任何尺寸的大型图像,而无需支付带宽溢价。
即使它有点搭便车于 Flash,但在 Flash 不可用时它也能完美降级。
由于它仍然有点粗糙,我希望能听到您的反馈!
-Daniel
不错,但在IE6中不起作用。
无论如何,谢谢。
在我的IE6中没有任何作用:(