作者:lin | 来源:互联网 | 2020-09-02 13:35
移动端基本上都是需要做图片适应处理的,比如轮播图,商品封面图等等;用户发布的图片都不是尺寸规格的图。那么在做移动开发的小伙伴是否遇到图片适应的困难呢?告诉大家,其实css有一个object-fit属性,可以很方便我们来调整图片,本文是小编整
移动端基本上都是需要做图片适应处理的,比如轮播图,商品封面图等等;用户发布的图片都不是尺寸规格的图。那么在做移动开发的小伙伴是否遇到图片适应的困难呢?告诉大家,其实css有一个object-fit属性,可以很方便我们来调整图片,本文是小编整理的在css上调整图片的方法。
那么有什么办法处理呢?刚好css3有了object-fit属性
下面来说一下各个属性值
1.object-fit: cover;
这个属性值在移动端是用得最多的一个。下面看例子
//css部分
img{
border: 2px red solid;
width: 300px;
height: 300px;
object-fit: cover;
}
cover是居中填充整个内容,其中有一边是一定会刚好填充完整的,剩余的将会裁剪掉(这里的填充是一定是会填满整个内容的)
效果图
以上就是如何在css上让图片居中、图片适应的详细内容,更多请关注 第一PHP社区 其它相关文章!