如何通过CSS3的object-fit来调整图片适配尺寸

这篇文章主要讲解了“如何通过CSS3的object-fit来调整图片适配尺寸”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何通过CSS3的object-fit来调整图片适配尺寸”吧！

创新互联主营古交网站建设的网络公司,主营网站建设方案,app软件开发,古交h5小程序制作搭建,古交网站营销推广欢迎古交等地区企业咨询

CSS Code复制内容到剪贴板

1. .image__contain {   

2.   object-fit: contain;    

3. }    

4. .image__fill {   

5.   object-fit: fill;    

6. }   

7. .image__cover {   

8.   object-fit: cover;    

9. }   

10. .image__scale-down {   

11.   object-fit: scale-down;   

12. }  

居中并裁剪图片
置图片的裁剪尺寸非常简单，你只需在 CSS 里使用这行代码：

CSS Code复制内容到剪贴板

1. img {   

2.      object-fit: cover;   

3. }     

就是这样。不需要语义、包装 div 或者其他没意义的代码。

这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 object-fit:cover 技术应用在这种图片上，并且设置好宽和高，图片自己就会进行裁剪和居中。

感谢各位的阅读，以上就是“如何通过CSS3的object-fit来调整图片适配尺寸”的内容了，经过本文的学习后，相信大家对如何通过CSS3的object-fit来调整图片适配尺寸这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！