|
<picture>
<source media="(最大幅or最小幅）: 値)" srcset="画像のURL">
<img src="画像2" alt="×××">
</picture>
でユーザーの閲覧環境に応じた最適な複数の画像サイズを使い分けることができます。
・上記はsource要素、srcset属性、ピクチャータグが対応していないブラウザのために
img要素（画像2）の順に記述します。
4枚の並木道の画像を用意します。namikimichi.jpg（並サイズのイラスト）と namikimichi_mini.jpg（小サイズ）、
namikimichi_long.jpg（長いサイズ）、namikimichi_tall.jpg（高いサイズ）の4枚です。
下の例ではウィンドウ幅（ブラウザ幅）が500pxまではnamikimichi_mini.jpgの画像が表示され、
501px～800pxまでならnamikimichi.jpgが表示され、1000px以上であればnamikimichi_long.jpgが表示される
という意味になります。
801px～999pxまではソース5行目のnamikimichi_tall.jpgが表示されることになります。
【ブラウザ表示】（Microsoft Edgeで表示確認済み）
例のページでブラウザを最小化ボタンを押し少しディスプレイ画面より小さくして右端にマウスをポイントし両矢印マークが表示されたら
4つのテーブルに向かって左にスライドして下さい。サイズが変化する位置がわかりやすいです。
全部で3段階に変化します。
並木道のイラスト その2
ソース
<picture>
<source media="(max-width:500px)" srcset="./image/namikimichi_mini.jpg">
<source media="(max-width:800px)" srcset="./image/namikimichi.jpg">
<source media="(min-width:1000px)" srcset="./image/namikimichi_long.jpg">
<img src="./image/namikimichi_tall.jpg" alt="高い">
</picture>
■ その他の項目
・
最適な画像サイズを選択する
HTML5のタグ一覧
HTMLタグ一覧
CSS一覧
|
