0
点赞
收藏
分享

微信扫一扫

项目部署_持续集成_Jenkins

minute_5 2024-07-24 阅读 29

1.第一种方式:(直接给图片设置:object-fit:cover;

.imgbox{
  	width: 100%;
	height:200px;
	overflow: hidden;
	position: relative;

  img{
	width: 100%;
    height: 100%;  //图片要设置高度
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    object-fit:cover;  //重要代码
  }
}

2.第二种方式(给图片设置:object-fit: none; object-position: 50% 50%;

.imgbox{
  	width: 100%;
	height:200px;
	overflow: hidden;
	position: relative;

  img{
	width: 100%;
    height: 100%; //图片要设置高度
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	//重要代码
   	object-fit: none; /* 不调整图片大小 */
    object-position: 50% 50%; /* 图片中心对齐盒子中心 */ 
  }
}

在这里插入图片描述

完成~

举报

相关推荐

0 条评论