縦横比を維持するCSS
CSSのコードチェックをしていたらこのようなコードに遭遇した。
<div class="a"> <div class="b">縦横比を維持</div> </div>
.a { display: flex; } .a .b { width: 100%; padding-top: 30%; background: pink; text-align: center; }
これはCSSで縦横比を維持する手法でレスポンシブサイトやスマートフォンのサイトなどでよく見かける。
Qiitaでこちらの記事が投稿されてからよく使用されるようになった。
あとcalc()でpadding-topを計算したコードもこちらの記事が出てから見かけるようになった。
ちなみにcalc()はAndroid 4.3以下だと使用できない。
便利な手法だがdisplay: flex内で使用した場合、Microsoft EdgeとFirefoxだとpadding-topで高さが正しく出ないのでPCで閲覧するサイトで使用する際には注意が必要だ。
このようにEdgeとFirefoxだと高さが算出されずに表示される