疑似要素でpadding-topを指定してブロック要素の縦横比を維持する方法

cssのaspect-ratioも随分普及してきましたが、 今日は以前からブロック要素の縦横比を維持する方法です。

・縦横比を設定したい要素にposition:relativeを設定。（中身はposition:absolute) ・上記の要素に疑似要素を作成してpadding-topで縦横比を設定 ・中身をposition:absoluteで設定

    <div class="parent">
        <div class="child">子要素</div>
    </div>

.parent{
    position: relative;
    width: 80%;//幅の指定はここで。
    
    &::before{
        content: '';
        display: block;
        padding-top: (505/840)*100%;//（縦/横）*100％
        background: url("../img/concept_bk.png") no-repeat;
        background-size: contain;
    }
    
    .child{
        position: absolute; //中のコンテンツはabsoluteで設定。
        top:10px; //bottomは高さが未定のため設定できない。
        left: 100px;　//rightも未定のため設定できない。
    }
    
}//.parent
````