position:absoluteした時のdivの高さを可変にする

グリッドデザインのような横幅可変なサイトで、画像をとかを横幅に合わせて伸縮させたい場合がある。
imgタグであれば、width:100%; だけ指定しておけばOKだが、divとかで、position; absolute;した時など、高さが指定されていないのでうまくいかない。
そんなときの対処法。

■HTML
<div class="box ratio-1_1">
<div class="inner">
<p>1 : 1</p>
</div>
</div>
■css
.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%;
}


参考サイト
CSS のみで高さを可変にして要素の比率を維持するテクニック
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事