CSSで縦横比を維持する手法はflexbox内では使わないほうが良い

縦横比を維持する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サンプル

これはCSSで縦横比を維持する手法でレスポンシブサイトやスマートフォンのサイトなどでよく見かける。

Qiitaでこちらの記事が投稿されてからよく使用されるようになった。

CSSだけでアスペクト比を固定するテク

Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。

あとcalc()でpadding-topを計算したコードもこちらの記事が出てから見かけるようになった。

ちなみにcalc()はAndroid 4.3以下だと使用できない。

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像を表示させたい時は以下の方法で実装することができます。

calc()でpadding-topを計算したサンプル

便利な手法だがdisplay: flex内で使用した場合、Microsoft EdgeとFirefoxだとpadding-topで高さが正しく出ないのでPCで閲覧するサイトで使用する際には注意が必要だ。

このようにEdgeとFirefoxだと高さが算出されずに表示される