border和图⽚之间有缝隙_不⽤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;
}
htmlborder
.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");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。