How TO - アスペクト比

CSS を使用して要素のアスペクト比の維持方法を学習します。

アスペクト比

リサイズした時にも、アスペクト比（4:3、16:9 など）をキープするフレキシブルな要素を作成します：

アスペクト比とは？

要素のアスペクト比は、幅と高さの比例関係を表します。 2 つの一般的なビデオアスペクト比は、4:3（the universal video format of the 20th century）と 16:9 (universal for HD television and European digital television)です。

How To - 高さと幅が同じ

ステップ 1) HTML の追加：

<div> のようなコンテナ要素を使用し、内部にテキストが必要な場合は、子要素を追加します：

例

ステップ 2) CSS の追加：

DIV のアスペクト比を維持するために、padding-bottom にパーセント値を追加します。次の例は、1:1（高さと幅は常に等しい）のアスペクト比を作成します：

例 1:1 アスペクト比

.container {
    background-color: red;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want text inside of it */
}

/* If you want text inside of the container */
.text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Try it Yourself »

その他のアスペクト比：

例 16:9 アスペクト比

.container {
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

Try it Yourself »

例 4:3 アスペクト比

.container {
padding-top: 75%; /* 4:3 Aspect Ratio */
}

Try it Yourself »

例 3:2 アスペクト比

.container {
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

Try it Yourself »

例 8:5 アスペクト比

.container {
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

Try it Yourself »

❮ 前章へ次章へ ❯