HTMLで画像サイズを変更する方法

Web デザインにおいて、写真は Web サイトの美しさを高め、ユーザーの注目を集める非常に重要な要素です。多くの場合、最良の効果を得るには画像のサイズを変更する必要があります。この記事では主にHTMLを使って画像サイズを変更する方法を紹介します。

HTML では、画像サイズを変更する一般的な方法が 2 つあります。img タグの width 属性と height 属性を使用する方法と、CSS スタイルを使用する方法です。一つずつ紹介していきましょう。

img タグの width 属性と height 属性を使用する

img タグは、HTML に画像を挿入するために使用されるタグであり、最も基本的な使用法は次のとおりです。このうち、src属性は画像のパスを指定するために使用され、alt属性は画像に説明を追加するために使用されます。次に、画像のサイズを変更する必要があります。これは、幅と高さの属性によって実現できます。これら 2 つの属性は画像の幅と高さを指定でき、単位はピクセル (px)、パーセンテージ (%)、または em (親要素に対するフォント サイズの倍数) です。

これは例です:

<img src="image.jpg" alt="图片" />

このコードは、画像の幅を 200 ピクセルに、高さを 150 ピクセルに設定します。プロパティの 1 つだけが設定されている場合、画像が引き伸ばされたり圧縮されたりしないように、もう 1 つのプロパティは元の画像の比率に応じて自動的に調整されることに注意してください。

CSS スタイルの使用

img タグの幅と高さの属性を使用することに加えて、CSS スタイルを使用して画像サイズを変更することもできます。この利点は、すべての画像のサイズを 1 つのスタイル シートで均一に制御できるため、コードの繰り返しを減らすことができることです。

CSS を使用して画像サイズを変更するには、img タグのクラスを定義し、CSS で対応するスタイルを設定する必要があります。以下に例を示します。

<img src="image.jpg" alt="图片" width="200px" height="150px" />

<img src="image.jpg" alt="图片" class="picture" />

このコードは、img タグに class 属性を追加し、CSS で .picture クラスを定義することにより、画像サイズを変更する効果を実現します。 CSS スタイルを確実に有効にするには、スタイル シートを Web ページにリンクする必要があることに注意してください。

同時に、パーセンテージを使用して画像のサイズを設定することもできます。例:

.picture {
  width: 200px;
  height: 150px;
}

このコードは、画像のサイズを元のサイズの半分に設定します。レスポンシブデザインを簡単に実装でき、さまざまな画面サイズのデバイスに適応できます。

概要

Web デザインでは、画像のサイズを変更することが一般的な要件です。この機能は、img タグまたは CSS スタイルの width 属性と height 属性を使用することで簡単に実現できます。 Web ページのパフォーマンスを確保するには、ユーザー エクスペリエンスに影響を与える大きすぎる画像の読み込みを避けるために、適切な画像サイズを使用することが最善であることに注意してください。

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