position:absoluteした要素に可変の高さを与える
書きました。
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
の高さを拾いますね。