SASS snippet to keep ratio of element

ratio.scss

.wrapper {
    display: inline-block;
    position: relative;

    &:after {
        content: "";
        padding-top: 56.25%; // Use 100% for square ratio
        display: block;
    }

    .inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        img {
            display: block;
            width: 100%;
            height: 100%
        }
    }
}

/*
    <!-- Example Markup -->
    <div class="wrapper">
        <div class="inner">
            <h1>Keep ratio please</h1>
        </div>
    </div>
    
    <div class="wrapper">
        <div class="inner">
            <img src="/images/image.jpg" alt="An image">
        </div>
    </div>
*/