высота пропорциональна ширине

style.css

.ratio {
    width: 50%; /* здесь можно установить любую нужную ширину */
}

.ratio-inner {
    position: relative;
    height: 0;
    border: none;
}

.ratio-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #cce;
}

.ratio-4-3 {
    padding-top: 75%; /* 100% ширины делим на 4 и умножаем на 3 */
}

.ratio-5-1 {
    padding-top: 20%; /* 100% ширины делим на 5 и умножаем на 1 */
}

высота пропорциональна ширине

<div class="ratio">
    <div class="ratio-inner ratio-4-3">
        <div class="ratio-content">
            Это содержимое блока 4/3
        </div>
    </div>
</div>
<br>
<div class="ratio">
    <div class="ratio-inner ratio-5-1">
        <div class="ratio-content">
            Это содержимое блока 5/1
        </div>
    </div>
</div>

высота пропорциональна ширине.markdown

высота пропорциональна ширине

ширина пропорциональна высоте

A Pen by Veremey on CodePen.

License.