html PCとSPで违う画像を表示させる方法

Posted 2021-05-11

<style>
/* 640px以上の時は、img要素（SP用画像）をdisplay:none;、
640px以下はimg要素をdisplay:blockで表示し、backgroundでPC用の画像を消す。*/

  img {
	vertical-align: top;
}

@media only screen and (max-width: 640px) {
img {
	width: 100%;
	height: auto;
  }
}

.logo {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	background: url(../img/img_pc.jpg) no-repeat center;
}

.logo img {
	display: none;
}


@media only screen and (max-width: 640px) {
.logo {
	width: 50px;
	height: auto;
	background: none;
  }

.logo img {
	display: block;
  }
}
</style>

<p class="logo"><img src="img/img_sp.png" width="100" height="100" alt="c-brains"></p> /*SP用の画像*/