HTML を使用すると、Web ページで画像を使用したり、さまざまなスタイルを適用して画像をより魅力的にしたりできます。画像の縦横比を変更する必要がある場合、または画像が Web ページのレイアウトに合わない場合は、サイズを変更できます。この目的のために、「 幅 ' と ' 身長 「上のプロパティ」 画像 ' 鬼ごっこ。これらのプロパティ値は、CSS ピクセルで簡単に設定できます。

このマニュアルでは、HTML で画像のサイズを変更する方法を学習します。

開始する前に、画像のサイズ変更操作が実行される HTML ファイルに画像を追加する必要があります。

HTML に画像を埋め込むには?

HTML で画像を追加するには、次の構文を使用します。

上記の構文の説明を以下に示します。 「 画像 ” タグは 2 つの属性を使用します。

• • 「ソース」 画像のパス (URL) を提供するために使用されます。
  • 'すべての' 画像が表示されない場合に代替テキストを提供するために使用されます。

HTML

以下のコードは 2 つの div を表しています。最初の div では、Web ページの上部中央に「 HTML の画像サイズ 」

タグを使用して:

< 分周 >
< 中心 >
< h1 > 画像サイズ の HTML h1 >
中心 >
分周 >

2 番目の div には、「」という名前のクラスが追加されます。 容器 」 そして中央の画像を表すために、

タグを使用しました。センター内に、以下のコードを記述して画像を追加します。

< 分周 クラス = '容器' >
< 中心 >
< 画像 ソース = 「画像/バタフライ.jpg」 すべての = 「代替テキスト」 >
中心 >
分周 >

選択した画像に「 640*437 」 アスペクト比は次のようになります。

次のセクションでは、画像のサイズを変更する方法を示します。

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

画像のサイズをカスタマイズしたり、「 幅 ' と ' 身長 」属性を使用して、幅と高さを設定します。

では、追加した画像の幅の値を「 300 」そしてそれがどのように機能するかを見てください：

< 画像 ソース = 「画像/バタフライ.jpg」 すべての = 「代替テキスト」 幅 = 「300」 >

画像の幅が変更され、正常にサイズ変更されていることがわかります。

幅に加えて、「 身長 」属性も同じ目的で利用できます。サイズの違いを表示するには、「 550 」 画像の高さとしてのピクセル:

< 画像 ソース = 「画像/バタフライ.jpg」 すべての = 「代替テキスト」 幅 = 「300」 身長 = 「550」 >

画像サイズの違いをはっきりと観察できます。

これが、幅と高さの属性を使用して画像のサイズを変更する方法です。

結論

HTML では、「 身長 ' と ' 幅 」属性は、画像のサイズ変更に使用されます。これらの属性の値を設定することで、追加された画像のデフォルトの縦横比を変更できます。その結果、画像サイズに関して明確な違いが見られます。このブログでは、height プロパティと weight プロパティを使用して HTML の画像のサイズを変更する方法を示しました。