srcset指定で画面幅によって別の画像を表示する

harada 104views 更新:2015年3月17日

下記のように指定することで、htmlのみで画面の幅によって表示する画像を変更することができます。

<img src="img.jpg" srcset="img320.jpg 320w,img640.jpg 640w" alt="">

こちらの指定の場合は、srcset指定に対応していないブラウザではimg.jpgが、320px以下の画面ではimg320.jpgが、 あとは640wという640pxまでの指定しかないため、321px以上のブラウザではimg640.jpgが表示されます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません