BFE.devでのAI解答例 - フロントエンド面接質問
83. CSSで固定縦横比の要素をどう作る？

1. パディング値を利用する方法：固定された縦横比を持つコンテナを作り、その中に要素を配置します。そして、パディング値によってその要素を指定された縦横比に設定します。

例えば、16:9の縦横比を持つ要素を作る場合、以下のように実装できます。

.container {
  width: 100%;
  padding-top: 56.25%; /* 16:9の縦横比に対応するパディング値を指定する */
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

2. Viewport単位を利用する方法：viewport単位を利用して、要素の縦横比を指定することもできます。例えば、以下のように実装できます。

.element {
  width: 80vw; /* ビューポートの80%の幅を占める */
  height: calc(80vw / 16 * 9); /* 16:9の縦横比を保持するように高さを計算する */
}

3. アスペクト比ボックスを利用する方法：CSSの動的なアスペクト比ボックスを使用することもできます。例えば、以下のように実装できます。

.element {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9の縦横比を保持するように指定する */
}

.element > iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

これらの方法を使って、縦横比固定の要素を作成できます。また、CSSの動的なアスペクト比ボックスや、JavaScriptを使用して縦横比を制御することもできます。