欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css图片自适应 有缝隙,有间隙,解决办法

程序员文章站 2022-05-15 08:25:30
...

问题: 图片自适应 有缝隙,有间隙

css如下:

.banner {
  position: relative;
  width: 100%;
  min-height: 150px;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
}

css图片自适应 有缝隙,有间隙,解决办法

 解决1:object-fit: cover; 尝试无效

.banner img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

解决2:父容器:font-size: 0; 可用

.banner {
  position: relative;
  width: 100%;
  min-height: 150px;
  overflow: hidden;
  font-size: 0;
}

 

相关标签: style css