3
1604view

【保存版】レスポンシブで2枚のimg切替をCSSのみで行う2つの方法

img切替をCSS

レスポンシブ対応ページは本来であれば1枚の画像が望ましいですが、どうしてもPCとスマホで画像を切り替えたい場合に使う方法を2つ説明します。

background方式

backgroundとして画面が大きいときはPC用画像を読み込み、画面が小さい時はスマホ用画像を読み込むCSSを切り替える方法。

<div class="imagebox"></div>

<style>
.imagebox{
background:url(sp.jpg);
}
@media only screen and (min-width:670px){
.imagebox{
background:url(pc.jpg);
}
}
</style>
imageboxに対してbackgroundでimgを読み込み、min-widthでPCの場合はパソコン用画像のpc.jpgを読み込むCSSを記述。
この場合、imageboxに対してheight widthの追加記述を行う必要がある。

display:none方式

画面が大きいときはPC用画像を読み込み、スマホ用画像を消す、画面が小さい時はスマホ用画像を読み込み、PC用画像を消すCSSを記述する方法。

<img class="pc" src="pc.jpg" />
<img class="sp" src="sp.jpg" />

<style>
/*スマホの場合*/
@media only screen and (max-width:670px){
img.pc{
display:none
}
}
/*PCの場合*/
@media only screen and (min-width:670px){
img.sp{
display:none
}
}
</style>
max-width と min-width でパソコンとスマホを分け、該当しない時は display:none で非表示にしている。
imgでの記述を行う為、Lazy等の画像表示遅延jsも併用が可能。

この記事が役に立ったらクリック!

MeteoLabo