アスペクト比を保つ方法

CSSを使用して要素のアスペクト比を保つ方法を学びます。

どのように実現するか - 高さが幅と同じ

ステップ1 - HTML を追加：

コンテナ要素、例えば <div>、テキストを含む場合、子要素を追加してください：

<div class="container">
  <div class="text">Some text</div> <!-- コンテナ内にテキストがある場合 -->
</div>

ステップ2 - CSS を追加：

に padding-top パーセンテージ値を追加して、DIVの幅高比を維持します。以下の例では、幅高比が 1:1 の DIV（高さと幅が常に等しい）を作成します：

インスタンス - 1:1 幅高比

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 幅高比 */
  position: relative; /* 内部にテキストがある場合 */
}
/* コンテナ内にテキストがある場合 */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

亲自试一试

その他の幅高比

インスタンス - 16:9 幅高比

.container {
  padding-top: 56.25%; /* 16:9 幅高比（9 に 16 を除いた 0.5625） */
}

亲自试一试

インスタンス - 4:3 幅高比

.container {
  padding-top: 75%; /* 4:3 幅高比（3 に 4 を除いた 0.75） */
}

亲自试一试

インスタンス - 3:2 幅高比

.container {
  padding-top: 66.66%; /* 3:2 幅高比（2 に 3 を除いた 0.6666） */
}

亲自试一试

インスタンス - 8:5 幅高比

.container {
  padding-top: 62.5%; /* 8:5 幅高比（5 に 8 を除いた 0.625） */
}

亲自试一试

CSS aspect-ratio 属性

新しいブラウザでは、シンプルに CSS を使用できます aspect-ratio 属性：

インスタンス - 3:2 幅高比

.container {
  aspect-ratio: 3 / 2;
}

亲自试一试

表中的数字注明了完全支持该属性的首个浏览器版本。