html 位置：绝对した要素に可変の高さを与える

Posted 2021-05-10

.box {
    position: relative;
    width: 50%;
    height: auto;
    background: #444;
}
.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
}
.inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

<div class="box ratio-1_1">
    <div class="inner">
        <p>1 : 1</p>
    </div>
</div>