HTML では、次のさまざまな方法を使用して画像のサイズを変更できます。
- HTMLタグを使用する
- インラインスタイル属性の使用
- 内部CSSの使用
HTMLタグを使用する
注: HTML 5 は、次の高さと幅の属性をサポートしていません。 ![]()
したがって、画像または画像のサイズを変更するには、インライン スタイル属性と内部 CSS オプションを使用する必要があります。
ドキュメント内の画像のサイズを変更したい場合は、 HTMLタグ これを Web ページに表示するには、以下の手順に従う必要があります。次の手順を使用すると、画像サイズを簡単に変更できます。
ステップ1： まず、任意のテキスト エディターに HTML コードを入力するか、画像のサイズを変更する既存の HTML ファイルをテキスト エディターで開く必要があります。
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
ステップ2： 次に、img タグ内にカーソルを置きます。そして、画像のサイズを変更するには、img タグの height 属性と width 属性を使用する必要があります。したがって、次の属性を入力する必要があります。
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
ステップ 3: そして最後に、HTML ファイルを保存して実行する必要があります。
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>今すぐテストしてください
上記の HTML コードの出力を次のスクリーンショットに示します。
インラインスタイル属性の使用
Web ページに表示されるインライン スタイル属性を使用して画像のサイズを変更したい場合は、以下の手順に従う必要があります。これらの手順を使用すると、画像サイズを簡単に変更できます。
ステップ1： まず、任意のテキスト エディターに HTML コードを入力するか、画像のサイズを変更するために style 属性を使用する既存の HTML ファイルをテキスト エディターで開く必要があります。
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
ステップ2： 次に、カーソルを 画像タグ サイズを変更したい画像の次に、 src 属性の直後に style 属性を入力する必要があります。次に、次のブロックに示すように、style 属性に幅と高さのプロパティを入力する必要があります。
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
ステップ 3: 最後に、HTML ファイルを保存して実行する必要があります。
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>今すぐテストしてください
上記の HTML コードの出力を次のスクリーンショットに示します。
内部 CSS の使用
Web ページに表示される内部カスケード スタイルシートを使用して画像または画像のサイズを変更したい場合は、以下の手順に従う必要があります。これらの手順を使用すると、画像のサイズを簡単に変更できます。
ステップ1： まず、画像のサイズを変更するために内部 CSS を使用するテキスト エディターに HTML コードを入力するか、テキスト エディターで既存の HTML ファイルを開く必要があります。
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
ステップ2： ここで、HTML ドキュメントの head タグにカーソルを置き、タグ内にスタイルを定義する必要があります。 次のブロックに示すようにタグを追加します。そして、次のように入力します。 幅と高さ 属性を ID セレクターに追加します。
#imagesize { width:100px; height:100px; } ステップ 3: ここで、サイズを変更したい画像の img タグに ID を入力する必要があります。
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> 今すぐテストしてください ステップ5: 次に、HTML ファイルを保存して、そのファイルを実行する必要があります。次のスクリーンショットは、上記の HTML コードの出力を示しています。
Javaのオブジェクト
