HTML5のpictureを使ってみる

HTML5のpictureタグを使ってみます。

対応ブラウザ

pictureの対応ブラウザはこちら
IEやAndroid4.4以下などで対応していないようです。

サンプルコード

pictureを使う場合、中にsourceタグとimgタグを追加します。

HTML

<picture>
	<source media="(min-width: 960px)" srcset="./img/image03.jpg">
	<source media="(min-width: 768px)" srcset="./img/image02.jpg">
	<img src="./img/image01.jpg" alt="">
</picture>

sourceタグのmediaにメディアクエリの値を、srcsetで画像ファイルのパスを指定します。
この場合は960px以上でimage03.jpg、768px以上でimage02.jpg、それ以外はimage01.jpgが表示されるようになります。
pictureのデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31