position:absoluteした要素に可変の高さを与える

　追記

なんか1年くらいかかりはしましたが2万viwe超えました。
他の記事なんか1000にも満たないことが多いので驚きです。

よく検索されているようなのでもしわかりにくいことがあればコメントください。

　本題

positionは便利だけど、リキッドデザインで使う場合囲んだdivなどにposition:absoluteを当てると画像の伸縮がうまくいかなくなる。

これは高さを指定しないから起こるのだが、
高さ固定したらそもそもdivの中の画像が伸縮しなくなるじゃん！！

こんな場面に出会った人は少なくないはず、多分。

どうにかなります

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

.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%;
}

ブラウザの幅を変えてみてください。

See the Pen position:abosoluteしたdivに可変の高さをつける by kenta kanno (@nknkt) on CodePen.

divに:beforeでpaddingを与えることで
擬似的に高さを与えます。

padding-topの値を変えることで比率を変えることももちろんできます。

.innerのwidth、heightは100%に指定することでratio-1_1の高さを拾いますね。