不用找UI， CSS也能搞定图片效果（等比缩放， 背景模糊处理，投影等等）

一. 实现图片的等比缩放

在实际开发过程中， 总是会遇到各种需要处理图片的情况，举个简单的例子， 用户上传头像，我们都知道头像宽高是有一定比例的， 但用户的图片千奇百怪，如果简单的按照我们设定的宽高显示，图片变形不可避免，那么该怎么处理？

方法1： object-fit

这个时候我们需要用到css的一个属性， object-fit.

<div class='header-container'>
     <img src="./333.jpg" alt="">
</div>
<img src="./333.jpg" alt="" style='height: 100px;'>

.header-container{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    border-radius: 50%;
    overflow: hidden;
}
.header-container img{
    width: 100%;
    height: 100%;
}

不难看出， 上面的头像对比下面的原图，高度被拉伸了， 那么此时只需要给img添加一个属性object-fit: cover;

效果如下：

object-fit属性你了解多少呢？下面听我详细介绍下。

object-fit属性详解

根据MDN（object-fill）的介绍， object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

也就是说盒子固定宽高， 图片在这个盒子里面会如何适应。

它有四个属性值：

fill | contain | cover | none | scale-down

contain： 被替换的元素会被缩放，以此来适应框的宽高比， 如果里面元素的宽高比和框的宽高比不匹配，那么就会产生黑边。

可以看到上面图片中左右两边的就是所谓的黑边， 因为它的宽高比与框的不一致。

cover： 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

也就是说， 在宽高比不一致时，cover属性值会进行裁剪，以此来适应容器。

就像这样：

fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

 fill属性与cover属性值类似，都会完全填充内容框， 不同的是fill属性值会拉伸元素来适应容器

如下图， 高度被拉伸

scale-down： 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

大概就是取决于none和contain的最小值， 这个属性不怎么用到。

 

方法2： max-width和 max-height

我们可以设置max-width和max-height来限制图片的最大值，一般是设置为外层容器的100%； 这样图片就会等比缩放，且不会变形。

 

二.css处理图片效果

比如背景图片变模糊， 头像变亮，增加投影效果，反转颜色，对比度，饱和度等等

只需要使用到css3的一个属性， filter

原图：

1.图片变模糊

    filter: blur(5px);

2.图片对比度调整

filter: contrast(200%);

3. 将图片转为灰度图像

    filter: grayscale(1);

4.色相旋转，

filter: hue-rotate(45deg);

5.给图像设置一个阴影效果

    filter: drop-shadow(16px 16px 20px yellow) invert(3%);

 

下面具体说说filter的各个属性值

/* URL to SVG filter */
filter: url("filters.svg#filter-id"); 

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

 

• url(）：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.
• blur()：给图像设置高斯模糊，值越大越模糊， 但不支持百分比
• brightness()： 给图像应用一种线性乘法，使其变暗/变亮，为0则全黑，为100%以上才会有变亮的效果
• contrast()：调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
• drop-shadow(): 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本.
• grayscale(): 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
• hue-rotate(): 给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
• invert(): 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

 

 

想到再补充，溜了溜了。