工作的过程中，排版经常会遇到为了整洁，需要把图片整理成一样的宽高，通常的做法是设置固定宽高。
目前固定图片比例一般为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，把空间撑出来接着设定图片的内容，然然后设置图片的参数，垂直居中
网友评论