noqua
9/30/2019 - 12:47 PM

レスポンシブに画像を表示

シンプルにPCとスマホで画像を出し分けたい場合

<picture>
	<source media="(min-width: 768px)" srcset="pc.png">
	<source media="(max-width: 767px)" srcset="sp.png">
	<img src="pc.png" alt="" class="hide-on-sp"><!-- PC用フォールバック -->
	<img src="sp.png" alt="" class="hide-on-pc"><!-- SP用フォールバック -->
</picture>

<!-- ピクセル密度に合わせた画像の変更 -->
<picture>
	<source media="(min-width: 768px)"
			srcset="images/pc.png,
					images/pc@2x.png 2x">
	<source media="(max-width: 767px)"
			srcset="images/sp.png,
					images/sp@2x.png 2x">

  <!-- PC用フォールバック -->
	<img src="images/pc.png"
		srcset="images/pc@2x.png 2x"
		alt=""
		class="hide-on-sp">
	<!-- SP用フォールバック -->
	<img src="images/sp.png"
		srcset="images/sp@2x.png 2x"
		alt=""
		class="hide-on-pc">
</picture>