CSS を使用して縦横比を維持しながら画像のサイズを変更する
この簡単なガイドでは、画像のサイズと収まる必要があるコンテナーに応じて、縦横比が乱れないように Web サイトに画像を設定する方法について説明します。 まず、これを理解するために CSS スタイルを見ていきます。
CSS を使用して Web ページにスタイルを適用する
CSSはCascading Style Sheetの略です。 カスケードとは、子要素に異なるスタイルを指定しない限り、親要素に適用されたスタイルが子要素に自動的に継承されることを意味します。
CSS を Web サイトに組み込む方法はいくつかあります。
- インライン CSS: HTML 要素で
style属性を使用し、その要素に特定のスタイル プロパティを適用することは、インライン CSS として知られています。 - 内部スタイル シート: Web サイトの 1 ページだけにスタイルを適用する場合は、内部 CSS を使用します。 したがって、HTML ページの
<head>部分内の<style>タグで囲まれたそのページのスタイル プロパティを含めます。 - 外部スタイル シート: すべての Web サイト ページは、外部 CSS を使用してスタイルを適用できます。 その結果、さまざまなセレクタ タイプとスタイル プロパティを含むスタイル シートを作成し、それをすべての Web サイトの Web ページに含めます。
CSS には、画像に関連付けられた多数のプロパティがあります。 これらのプロパティは、Web サイト上の画像のサイズ、色、位置などを調整します。
div 要素のようなコンテナに画像をウェブサイトに配置する場合、そのサイズは画像サイズに依存します。 一部の画像は大きく、一部は小さいため、これにより問題が発生することがあります。 このような画像を設定するために、縦横比を設定します。
CSS を使用して画像の縦横比を設定する
要素の幅と高さの比率は、アスペクト比と呼ばれます。 ユニバーサル ビデオ フォーマットは 4:3 で、2つの一般的なビデオ アスペクト比は 16:9 と 3:2 です (HD テレビとデジタル テレビではユニバーサルで、YouTube ビデオではデフォルトです)。
縦横比を設定する構文は次のとおりです。
aspect-ratio: auto || <ratio>;
デフォルト値、つまり auto に設定するか、width:height の比率を指定します。 可能な値とその意味は次のとおりです。
| アスペクト比 | 説明 |
|---|---|
アスペクト比: 自動; |
これがデフォルト値です。 |
アスペクト比: 1 / 1; |
幅と高さの比率は同じです。 |
アスペクト比: 2 / 1; |
画像の幅は高さの 2 倍です。 |
アスペクト比: 1 / 2; |
画像の幅は高さの半分です。 |
アスペクト比: 16 / 9; |
これは、ビデオで一般的に使用される比率です。 |
アスペクト比: 0.5; |
比率は float 値を使用して指定することもできます。 |
アスペクト比: 継承; |
親要素の縦横比を継承します。 |
アスペクト比: 初期; |
これは、デフォルト値 auto と同じです。 |
アスペクト比: 未設定; |
要素からすべてのアスペクト比を削除します。 |
画像を配置して縦横比を設定する例を考えてみましょう:
<html>
<head>
<style>
.images{
aspect-ratio: auto;
width: 400px;
}
</style>
</head>
<body>
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
</body>
</html>
このコード セグメントでは、画像を配置し、それにクラス セレクタ images を割り当てました。 このクラスは、アスペクト比を auto に設定し、幅を 400px に指定した CSS クラスです。
auto 値の場合、高さは画像のサイズに応じて自動的に調整されます。
ここで、アスペクト比を次のように変更します。
.images{
aspect-ratio: 2 / 1;
width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
出力は次のようになります。
この出力画面では、画像の高さが幅の半分になっていることがわかります。 ここで比率 1 / 2 を使用して、高さが幅の 2 倍になるようにします。
.images{
aspect-ratio: 1 / 2;
width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
CSS を使用して同じ縦横比を維持しながら画像のサイズを変更する
CSS を使用すると、アスペクト比を維持したまま画像のサイズを変更できます。 たとえば、サイズが 428x428px の次の画像を考えてみましょう。
CSS を使用して、縦横比を維持したまま上記の画像のサイズを変更できます。 次の例を検討してください。
.images {
display: block;
max-width:250px;
max-height:90px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
このコード セグメントでは、CSS クラス セレクタ images を使用します。 このクラスは、縦横比を変更せずに 250x90px のサイズで画像のサイズを変更します。
この方法により、ウェブページのニーズと要件に応じてアスペクト比を設定できます。
同じ縦横比で画像を変更することもできます。 これは主に、Web サイトをすべてのディスプレイ サイズに対応させるために行われます。