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

  • 6
    Like
  • 0
    Comment

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の値を変えることで比率を変えることももちろんできます。

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