aspect-ratioで要素のサイズを決める

aspect-ratioは画像に適用するイメージが強いけど、普通の要素でも使える。 Cardコンポーネントやタイル型UIで、width/heightに絶対値を指定するような方法より直感的でわかりやすい。

.hd > article {
  aspect-ratio: 16/9;
}
.sd > article {
  aspect-ratio: 4/3;
}

デモ