如何在css上让图片居中、图片适应

2024-01-17 16:40 小编

　　移动端基本上都是需要做图片适应处理的，比如轮播图，商品封面图等等；用户发布的图片都不是尺寸规格的图。那么在做移动开发的小伙伴是否遇到图片适应的困难呢？告诉大家，其实css有一个object-fit属性，可以很方便我们来调整图片，本文是小编整理的在css上调整图片的方法。

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

　　下面来说一下各个属性值

　　1.object-fit:cover;

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

　　<imgsrc="http://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg"alt="">

　　//css部分

　　img{

　　border:2pxredsolid;

　　width:300px;

　　height:300px;

　　object-fit:cover;

　　}

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

Tag：如何

联络方式：

微信二维码

您感兴趣的内容