HTMLで画像サイズを設定する方法

HTML は Web ページの作成に使用されるマークアップ言語で、テキスト、画像、オーディオ、ビデオなどのさまざまな要素やコンテンツを Web ページに追加できます。その中で、画像は Web ページの一般的な要素ですが、Web コンテンツのレイアウトにより適した画像にするために、画像のサイズを制御する必要がある場合があります。この記事では、HTML を使用して画像のサイズを設定する方法を説明します。

HTML の画像タグ

HTML では、img 要素を使用して画像を Web ページに追加します。 img 要素には src 属性があり、画像ファイルの URL アドレスを指定します。たとえば、「example.jpg」という名前の画像を Web ページに追加するには、次のコードを使用できます。

<img src="example.jpg">

このようにして、ブラウザは Web ページに画像を表示します。ただし、この画像は予想とは異なるサイズである可能性があるため、他のプロパティを使用して画像の表示サイズを制御する必要があります。

画像サイズの設定

HTML には、画像の表示サイズを設定するための 2 つの主な属性 (幅と高さ) が用意されています。これら 2 つのプロパティは、画像の幅と高さをそれぞれピクセル単位で設定するために使用されます。たとえば、画像の幅を 200 ピクセルに設定するには、次のコードを使用します。

<img src="example.jpg" width="200">

同様に、画像の高さを 150 ピクセルに設定するには、次のコードを使用します。

<img src="example.jpg" height="150">

このように、指定した幅と高さに従って画像が表示されます。プロパティの 1 つだけが設定されている場合、ブラウザは他のプロパティの値に合わせて画像を自動的に比例的に拡大縮小することに注意してください。たとえば、幅属性のみが設定されている場合、ブラウザは元の画像の幅と高さの比率に基づいて、対応する高さの値を自動的に計算します。

幅と高さを同時に設定する

幅と高さを個別に設定するだけでなく、これら 2 つのプロパティを同時に設定することもできます。この場合、画像は 2 つのプロパティで指定されたサイズに合わせて拡大または圧縮されます。たとえば、次のコードは、画像の幅を 200 ピクセル、高さを 150 ピクセルに設定します。

<img src="example.jpg" width="200" height="150">

このようにして、画像のサイズは 200 ピクセル × 150 ピクセルに設定されます。幅と高さを同時に設定すると、画像が変形し、画像の表示効果に影響を与える可能性があることに注意してください。

CSS を使用して画像サイズを制御する

HTML 属性を使用して画像サイズを設定するだけでなく、CSS を使用して画像の表示効果を制御することもできます。具体的には、CSS の幅と高さのプロパティを使用して画像のサイズを設定できます。例:

<img src="example.jpg" style="width:200px;height:150px;">

同様に、外部スタイル シートで CSS スタイルを定義することもできます。例:

<img src="example.jpg" class="thumbnail">

<style>
.thumbnail {
    width:200px;
    height:150px;
}
</style>

このようにして、Web サイト全体で「サムネイル」クラスの画像要素を使用でき、そのサイズは 200 ピクセル × 150 ピクセルに設定されます。

結論

HTML で画像のサイズを設定すると、Web ページ上の画像の表示効果をより適切に制御できます。 width 属性と height 属性を使用して画像の幅と高さをそれぞれ設定することも、これら 2 つの属性を同時に設定して画像の表示比率を変更することもできます。さらに、CSS を使用して画像サイズを正確に制御し、Web ページをより魅力的で読みやすくすることができます。

以上がHTMLで画像サイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。