Make div with aspect-ratio 16:9 and centered image

aspect-ratio.scss

.ratio {
    // aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative; 

    &::before {
        content: "";
        padding-top: 56.25%;
        float: left;
    }

    &::after {
        clear: left;
        content: " ";
        display: table;
    }

    img {
        max-width: 100%;
        height: auto;
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}