css 如何让图片居中图片适应

小鱼儿 2022-02-27 06:00 315阅读 0赞

前段时间做移动端开发遇到的问题，以前是没注意到css有个object-fit属性，一直对图片适应不知道何从下手。  
**移动端基本上都是需要做图片适应处理的，比如轮播图，商品封面图等等；用户发布的图片都不是尺寸规格的图。**

## 那么有什么办法处理呢？刚好css3有了**object-fit**属性 ##

相关文档可以到这里看 [https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit][https_developer.mozilla.org_zh-CN_docs_Web_CSS_object-fit]

下面来说一下各个属性值

### 1.object-fit: cover; ###

这个属性值在移动端是用得最多的一个。下面看例子

<img src="http://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg" alt="">
    
    //css部分
    img{
        border: 2px red solid;
    	width: 300px;    
    	height: 300px;
        object-fit: cover;
    }

cover是居中填充整个内容，其中有一边是一定会刚好填充完整的，剩余的将会裁剪掉（这里的填充是一定是会填满整个内容的）

效果图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70][]   原图尺寸比例![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 1][]

### 2.object-fit: fill; ###

fill是填充整个内容，但是不会超出内容，当有一边填充完之后，如果还有空白处将会拉升使整个内容填满

效果图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 2][]  原图看上面

### 3.object-fit: contain; ###

contain填充的时候一样不会超出内容，当一边填充完之后，填充结束，并不会拉升改变图片比例，这样当图片不够填充整个内容的时候，一定会有一边留白。

效果图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 3][]  原图看上面

### 4.object-fit: scale-down; ###

scalc-down感觉跟contain一样，没看出有什么不同，如果有兄die知道欢迎交流

### 5.object-fit: none; ###

none就是默认属性值，什么填充都不给

### 总结：兼容性的话基本上的手机浏览器都能兼容，除非那些比你都上了年纪的手机。如果上面的内容不是很理解的话，可以比作一张图在你设定的宽高比内容中间由很小很小慢慢等比例放大（填充）。如果还是不能理解可能是我语言组织的不够好。那就去看官方文档 ###

[https_developer.mozilla.org_zh-CN_docs_Web_CSS_object-fit]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190326230609896.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 1]: /images/20220227/3908c262288d45058d6d5af7754e8e5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 2]: /images/20220227/5e9b3ded5af3407f850fbd956b1c666e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70 3]: /images/20220227/033dfd92dffe4cfbbcc5f0421b8dfcf1.png