图片在div内水平垂直居中两种css实现

最新推荐文章于 2024-03-31 19:00:40 发布

peade

最新推荐文章于 2024-03-31 19:00:40 发布

阅读量421

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/peade/article/details/100668760

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html元素

<div>
    <img src="http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg">
</div>

实现方式一

利用新的css属性方法object-fit

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

实现方式二

利用绝对定位和transform实现

div{
    width:150px;
    height:100px;
    position:relative;
}
img{
    position:absolute;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    left:50%;
    top:50%;
    tranform:translateX(-50%);
    transform:translateY(-50%);
}