工作的过程中,排版经常会遇到为了整洁,需要把图片整理成一样的宽高,通常的做法是设置固定宽高。
目前固定图片比例一般为16:9,宽高比为1:0.5625,下面为css:
代码块
.box{
background:#ccc;
position:relative;
overflow:hidden;
margin:20px;
}
.box::after{
padding-top:56.25%;
content:"";
display:block;
}
.img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
max-width: 100%;
margin: auto;
}
首先设定box伪类元素padding-top为了16:9的比例,并且设定content为空,display为block,把空间撑出来接着设定图片的内容,然然后设置图片的参数,垂直居中