img居中以及等比缩放

最新推荐文章于 2023-12-29 07:44:28 发布

jiaoのpan

最新推荐文章于 2023-12-29 07:44:28 发布

阅读量2.7k

点赞数 1

分类专栏：工作 css 文章标签： html css3

本文链接：https://blog.csdn.net/qq_42373946/article/details/109450273

版权

工作同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

1.等比缩放

img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%; 
}

2.居中并等比缩放

.父级div样式{
    display: block; 
    position: relative;
}
.子级div样式{
    max-width: 100%;
    max-height: 100%;
    width:auto;
    height:auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}

例子

<div style=" position: relative;">
 	<img  style="width: auto;height: auto;max-height:100%;max-width:100%;left: 50%;top: 50%; position: absolute;transform: translate3d(-50%,-50%,0);-webkit-transform: translate3d(-50%,-50%,0);" />
 </div>