固定スケール応答画像

仕事の過程で、レイアウトをきれいにするためには、画像を同じ幅にまとめる必要があることがよくあります.通常のやり方は、幅を固定することです.現在、固定画像の割合は一般的に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に設定し、空間を押し出して画像の内容を設定します.