如何在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是居中填充整个内容,其中有一边是一定会刚好填充完整的,剩余的将会裁剪掉(这里的填充是一定是会填满整个内容的)

image.png

Tag: 如何 图片
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码