图片缩放不模糊之css中image-rendering使用

image-rendering

css中的image-rendering是做什么的？
我们在做页面的时候经常会处理一些图片，比如让图片自适应外层容器的大小，等比例缩小或者放大。

1、我们在缩小图片的时候，原本大尺寸的图片经过强制缩放，会把相邻的像素点挤到一起，这个时候图片看上去就比原尺寸图片要模糊。
2、图片放大也是，原尺寸的图片经过放大，图片中的每一像素点就会拉伸，这个时候图片也是会失真没像素边缘会模糊处理。
我们在遇到这个上边的问题的时候一般处理的方式是做一些比较合适的图片来尽可能的解决想要的尺寸。
或者准备多张图片根据不同屏幕宽度来加载不同的图片。

image-rendering属性MDN解释：

用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

也就是说他是用来设置图片在浏览器中进行缩放的时候进行怎么的算法来展示图片效果，此属性具有继承特效，子元素的图片会继承父级的此属性设置值。

语法

/* 专有属性值 */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;/* 全局属性值 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

取值说明

auto：默认值，自 Gecko 1.9 （Firefox 3.0）起，Gecko 使用双线性（bilinear）算法进行重新采样（高质量）。
crisp-edges：此属性主要是处理的图片缩小时的算法类型，设置后图片缩小后不会变的模糊，而是锐化像素边缘。对小图放大不起作用。
pixelated：放大图像时, 使用最近邻居算法，就是多出来的像素有邻近的像素点色值进行填充，并不做模糊处理，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 auto 相同。

具体效果：

由于此属性是最新的属性，所以在浏览器支持方便并不是那么的完美，需要用各自浏览器的私有方式进行设置

image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering: -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

图片缩放不模糊之css中image-rendering使用相关推荐

html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
html img图片不平铺,如何在css中设置图片不平铺
如何在css中设置图片不平铺发布时间:2021-04-29 15:39:28 来源:亿速云阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...
php图片下载代码,php下载css中图片代码
提供一个常见的php下载css中图片代码,有需要的朋友可以下载,只要把$url填写好就行了哈. 代码如下复制代码 $host = $host[1]; if (!is_dir('img')) { m ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
html图片缩放6,四款css 图片按比例缩放实例(兼容ie6,7,firefox)
使用max-width,max-height:或者min-width,min-height的css属性即可.如: 代码如下 img{max-width:100px;max-height:100px;} ...
Excel 2019 插入图片缩放后模糊解决办法
步骤: 文件--选项--高级--图像大小和质量--选中"不压缩文件中的图像". 图 1-1 Excel 2019 参考:excel图片保存后变模糊怎么办?excel图片自动执行压缩 ...
html5图片缩放居中原理,html css 图片缩放等居中显示代码
$(document).ready(function () { var maxWidth = document.documentElement.clientWidth; // 图片最大宽度 var m ...
css图片加内阴影不显示,css中实现图片阴影
这是title 这是content .curve-shadow width : 100% height : 200px background : #F6F1C8 color : #D67E1C pad ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

图片缩放不模糊之css中image-rendering使用

image-rendering

语法

取值说明

图片缩放不模糊之css中image-rendering使用相关推荐

最新文章

热门文章