width属性
width属性は、
imgタグで指定された画像の幅を設定します。
現在、この属性は
画像、
iframe、
video
およびその他の一部のタグに対してのみ使用することができます。
値はピクセル単位またはパーセント単位で指定することができます。 パーセントでサイズを指定した場合、親要素の幅からの割合として計算されます。 ピクセルでサイズを指定する場合、単位は記述しません。
画像に幅も高さも指定されていない場合、画像は実際のサイズで表示されます。 高さだけが指定されている場合、画像は指定された高さになり、幅は画像のアスペクト比が崩れないように自動調整されます。 幅だけが指定されている場合も同様に、画像は指定された幅になり、高さはアスペクト比を保つように自動調整されます。 幅と高さの両方が指定されている場合、画像のアスペクト比が崩れる可能性があります(崩れないこともあります)。 幅または高さ(または両方)が実際のサイズよりも大きい場合、画像は拡大表示されますが、画質は低下します。
画像の幅と高さを属性で指定することを推奨します。この場合、ブラウザは各画像を取得した後にそのサイズを計算する必要がなくなるため、画像の読み込みが速くなります。
必要性がない限り、画像の実際のサイズを縮小表示することは推奨されません。
例えば、画像の実際のサイズが1000ピクセル × 1000ピクセルである場合に、幅を100pxと指定するとします。
この場合、画面上の画像は100ピクセルで表示されますが、ファイルサイズは1000ピクセル分のままであるため、読み込みに非常に時間がかかります。
動作例についてはこちらを参照してください:
imgタグ。