CSSのみで縦横比を保つレスポンシブなグリッド - ./ringoあまり情報が見つからなかったので、同僚の方がやっていたものを参考に。 グリッドのデザインなんかで縦と横の比率を変えたくないことがたまにあって、 その場合、window.resizeのイベントで高さを再計算したりしていた。 それがちょっといやだったのでCSSのみでどうにか実現してみた。 http://jsfiddle.net/w3jPr/1/ ウィンドウサイズを変えるとそのままの比率で大きさが変わるようになった。 仕組み 全体の高さの指定 グリッドのエリアの高さはpadding-topで指定します。 padding-topはwidthを基準にするので、 幅が変わると比率の変化なしで大きさが変わります。 グリッドの大きさの指定 グリッド個別の大きさの指定はpositon: absoluteで行います。 top、left、right、bottomをそれぞれ記述して、幅と高さを指定します。 これも
