css height ratio

make a div the

by Soviut

HTML

<a id="parent">
    <div class="name">
        this is some content.
    </div>
</a>

CSS

#parent {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* percent of  width to add to height */
    box-sizing: border-box;
        
    background: red;
}

.name {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 20px;
    box-sizing: border-box;
    
    background: blue;
    text-align: center;
}