CSS将img照片铺满父器皿div并响应式器⊙^⊙皿尺

2021-03-24 12:03 jianzhan

当一个网页页面中引进多个照片情况下,会遇到照片规格不一致,单规定显示信息成一致的尺寸,大家立即设定照片规格会造成照片形变,就是我们碰到的难题,看看处理方式

<div>
        <img src="引进的照片详细地址" alt="">
</div>

方式一:对img原素竖直垂直居中,并将它的高宽比和总宽设定一个最少全屏幕值

div{
    position:relative;
  width: 100px;
    height: 100px;
    overflow:hidden;
}
 div img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
}

方式二:设定img的css款式提升 object-fit:cover 相近于css3中情况照片的background-size: cover;

div{
  width: 100px;
  height: 100px;
 
}
div img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

到此这篇有关CSS将img照片铺满父器皿div并响应式器皿尺寸的文章内容就详细介绍到这了,大量有关CSS将img铺满父器皿 內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!