HTMLの `img`タグ

画像とHTMLの操作の基本をご覧くださいimgタグ、およびそれらを応答させる方法

画像はを使用して表示できますimg鬼ごっこ。

このタグはsrc画像ソースを設定するために使用する属性：

<img src="image.png" />

幅広い画像を使用できます。最も一般的なものは、PNG、JPEG、GIF、SVG、そして最近ではWebPです。

HTML標準では、alt画像を説明するために存在する属性。これは、スクリーンリーダーや検索エンジンボットによって使用されます。

<img src="dog.png" alt="A picture of a dog" />

あなたは設定することができますwidthそしてheight要素が占めるスペースを設定する属性。これにより、ブラウザは要素を考慮でき、完全にロードされたときにレイアウトが変更されません。ピクセルで表された数値を取ります。

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

を使用したレスポンシブ画像srcset

ザ・srcset属性を使用すると、好みに応じて、ピクセル密度またはウィンドウ幅に応じてブラウザが使用できるレスポンシブ画像を設定できます。このようにして、ページをレンダリングするために必要なリソースのみをダウンロードできます。たとえば、モバイルデバイス上にある場合は、より大きな画像をダウンロードする必要はありません。

次に、4つの異なる画面サイズに対して4つの追加画像を提供する例を示します。

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

の中にsrcset私たちはwウィンドウ幅を示すために測定します。

そうするので、私たちも使用する必要がありますsizes属性：

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

この例では、(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxの文字列sizes属性は、複数の条件をコンマで区切って、ビューポートに関連する画像のサイズを記述します。

メディアの状態max-width: 500pxビューポートの幅に相関して画像のサイズを設定します。つまり、ウィンドウサイズが500px未満の場合、ウィンドウサイズの100％で画像がレンダリングされます。

ウィンドウサイズが大きいが<900px、ウィンドウサイズの50％で画像をレンダリングします。

さらに大きい場合は、800pxで画像をレンダリングします。

ザ・vw unit of measure can be new to you, and in short we can say that 1 vwはウィンドウ幅の1％なので、100vwウィンドウ幅の100％です。

を生成するための便利なウェブサイトsrcset徐々に小さくなる画像はhttps://responsebreakpoints.com/。

私の無料ダウンロードHTMLハンドブック


その他のhtmlチュートリアル：


Tech Wiki Online！