HTML <img> height 属性
定義と使用法
height 属性は画像の高さをピクセル単位で指定します。
ヒント：画像には常にこの属性を指定してください height および width 属性。もし高さと幅が設定されている場合、ページが読み込まれる際に画像が必要なスペースを確保します。これらの属性が設定されていない場合、ブラウザは画像のサイズを知ることができず、適切なスペースを確保することができません。これにより、画像が読み込まれる間にページレイアウトが変更されます（画像が読み込まれる際）。
ヒント：使用 height および width 属性を縮小すると、ユーザーは大画像をダウンロードすることを強制されます（ページ上では小さく見える場合でも）。このような状況を避けるために、画像をページに使用する前に、画像処理ソフトウェアを使用してサイズを調整してください。
関連リンク：heightとwidth属性の詳細
例
高さ600ピクセル、幅500ピクセルの画像：
<img src="img_girl.jpg" alt="ジャケットの女の子" width="500" height="600">
文法
<img height="ピクセル">
属性値
| 値 | 説明 |
|---|---|
| ピクセル | 画像の高さをピクセルで指定します（例：height="100"）。 |
さらに多くの例
画像のサイズを変更 - フィルリング画像の作成
heightとwidth属性には、実際のサイズを指定せずに画像の大きさを指定できる隠れた特性があります。これらの値は実際のサイズより大きくも小さくもできます。ブラウザは自動的に画像を調整し、この予約スペースの大きさに合わせます。この方法で、大画像のサムネイルを作成したり、非常に小さい画像を拡大したりすることが簡単になります。ただし、注意すべき点是、ブラウザはファイル全体をダウンロードする必要があり、最終的に表示されるサイズに関わらず、元の横縦比を保たないと画像が歪むことがあります。
heightとwidth属性の別のトリックは、ページエリアを簡単に埋め込むことができ、またドキュメントのパフォーマンスを向上させることができます。例えば、ドキュメントに色の横条を配置したい場合、完全なサイズの画像を作成する必要はありません。代わりに、幅と高さが1ピクセルの画像を作成し、使用したい色を割り当てます。その後、heightとwidth属性を使用して大きいサイズに拡張します。
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
これは上記のHTMLの効果です。この色の帯は、1ピクセルの画像で作成されています：
パーセンテージ値を使用
width属性の最後のトリックは、パーセンテージ値を使用してピクセルの絶対値を置き換えることです。これにより、ブラウザはブラウザの表示ウィンドウの一定比例で画像を拡縮します。したがって、表示ウィンドウの幅と同じ幅、30ピクセルの高さの色の横条を作成するには、以下のように実現できます：
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
ドキュメントウィンドウのサイズが変更されると、この画像のサイズも変わります：
ヒント：パーセンテージ形式のwidth値が提供され、heightが無視された場合、拡大または縮小に関わらず、ブラウザは画像の横縦比を保ちます。これは、画像の高さと幅の比率が変更されず、画像が歪みないことを意味します。
以下のHTMLをご覧ください：
<img src="/i/ct_1px.gif"} width="20%" />
例えば、画像ct_1px.gifのwidth属性の百分比值のみを設定すると、矩形画像が得られます（これはct_1px.gifが1px幅と高さの矩形であるためです）：
ヒント：私たちは以上の例を提供することで、heightとwidth属性の使用方法をよりよく理解してもらうことを目的としています。もし広範囲の単色のブロックをページに装飾する必要がある場合、もっと良い方法があります。背景色を作成するためにCSSを使用
heightとwidth属性の詳細
heightとwidth属性を使用する理由
ドキュメントが読み込まれる際に内容が不規則に動くことがありますか？その理由は、ブラウザが各読み込まれた画像を表示するために、ページのレイアウトを繰り返し調整するためです。ブラウザは画像の幅と高さをダウンロードし、解析して画像のサイズを決定し、表示ウィンドウに対応する矩形スペースを確保します。その後、ブラウザはページの表示レイアウトを調整し、画像を挿入します。これにより、画像は独立したファイルであり、ソースファイルとともに独立して読み込まれることが示されています。
しかし、これはドキュメントを表示する最も効果的な方法ではありません。なぜなら、ブラウザは相邻および後続のドキュメント内容を表示する前に、各画像ファイルをチェックし、スクリーンスペースを計算する必要があるため、ドキュメントの表示に非常に大きな遅延をもたらし、ユーザーの読書を妨げる可能性があります。
クリエイターにとって、より効果的な方法は<img>タグのheightとwidth属性を使用して画像のサイズを指定することです。その場合、ブラウザは画像をダウンロードする前にその位置を確保し、ドキュメントの表示を加速し、ドキュメントの内容の移動を避けることができます。これらの属性はすべて整数値で、ピクセル単位で画像のサイズを表します。これらの属性が<img>タグの中でどのような順序で表示されるかは重要ではありません。
heightとwidth属性の問題
虽然<img>タグのheightとwidth属性はパフォーマンスを向上させ、いくつかの小技を実現させることができますが、それらを使用する際にはいくつかの厄介なネガティブ効果もあります。ユーザーが自動ダウンロード機能をオフにしていても、ブラウザは指定されたサイズで画像のためのスペースを表示する必要があります。そして、読者に残されるのは通常、意味のないアイコンが入った空のフレームで、これは画像が配置されている場所を示しています。その結果、ページは非常に悪く見え、完成していないように見え、多くのコンテンツが役に立ちません。指定されたサイズを使用しない場合、ブラウザはテキストの中に画像アイコンを配置するだけで、少なくとも読めるテキストが少なくともあります。
この問題に対する解決策がまだありません。ただ一点だけ強調しておきますが、使用することをお勧めします。 alt 属性 および説明的なテキストこれにより、読者がここに何が欠けているか少なくとも知ることができます。それでも、これらのサイズ属性を使用することをお勧めします。なぜなら、私たちはネットワークパフォーマンスを改善できるすべての行動を推奨するからです。
ブラウザのサポート
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| サポート | サポート | サポート | サポート | サポート |
