デコマガジン

レスポンシブでの画像入れ替え(img srcsetが効かない)

レスポンシブでの画像入れ替え(img srcsetが効かない)画像

ホームページで画像をPCとスマホで入れ替えて表示する方法

ホームページで画像をPCとスマホで入れ替えて表示する方法のsrcsetが効かない!

ホームページで画像を表示する際に使われるのが、

<img srcset="画像URL1 記述子1, 画像URL2 記述子2, 画像URL 記述子3, ..." src="デフォルト画像URL">

でもChromeでは変わらない。

そこで、<picture>を使用する。

<picture>
<source media="(max-width: 640px)" srcset="画像URL1">
<img src="画像URL2" alt="">
</picture>

640pxまでは、画像URL1 それ以上は、画像URL2となる。

記事一覧


ホームページ制作
について

デコジャパンの
サービス内容

ホームページの
実績紹介

デコマガジン
HP&PC