CSS将img图片填满父容器div并自适应容器大小

当一个页面中引入多张图片时候，会碰到 图片尺寸 不一致，单要求显示成一致的大小，我们直接设置图片 尺寸 会导致图片 变形 ，这就是我们遇到的问题，看下解决方法

<div>
        < img  src="引入的图片地址" alt="">
</div>

方法一：对img元素垂直居中，并将它的高度和 宽 度设置一个最小满屏值

div{
    pos IT ion:relative;
　 width: 100px;
    h ei ght: 100px;
    overflow:hidden;
}
 div img{
    position: absolute;
    top: 50%;
    left: 50%;
    dis play : 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填满父容器 内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS将img图片填满父容器div并自适应容器大小 全部内容，希望文章能够帮你解决 CSS将img图片填满父容器div并自适应容器大小 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS将img图片填满父容器div并自适应容器大小的详细内容...