固定比例响应式图片

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