CSSのみで縦横比を保つレスポンシブなグリッド - ./ringo
あまり情報が見つからなかったので、同僚の方がやっていたものを参考に。 グリッドのデザインなんかで縦と横の比率を変えたくないことがたまにあって、 その場合、window.resizeのイベントで高さを再計算したりしていた。 それがちょっといやだったのでCSSのみでどうにか実現してみた。 http://jsfiddle.net/w3jPr/1/ ウィンドウサイズを変えるとそのままの比率で大きさが変わるようになった。 仕組み 全体の高さの指定 グリッドのエリアの高さはpadding-topで指定します。 padding-topはwidthを基準にするので、 幅が変わると比率の変化なしで大きさが変わります。 グリッドの大きさの指定 グリッド個別の大きさの指定はpositon: absoluteで行います。 top、left、right、bottomをそれぞれ記述して、幅と高さを指定します。 これも
Z63 | Vertical align anything with just 3 lines of CSS | zerosixthree
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
