[CSS] Sample Code for Switching Images Between Desktop and Mobile
Here’s sample code for switching images between desktop and mobile using only HTML and CSS web technologies.
Using only HTML and CSS to switch images based on display size, the finished result looks like this:
? https://codenote-net.github.io/sandbox/responsive-img/index.html
CSS
.pc {
display: block !important;
}
.sp {
display: none !important;
}
@media only screen and (max-width: 767px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
}
HTML
<img class="pc" src="2560x6000.png" width="100%" />
<img class="sp" src="1242x5200.png" width="100%" />
The sample code is published in the following GitHub Pull Request, so please take a look.
? Desktop, Mobile で違う画像に切り替えるサンプルコード · Pull Request #10 · codenote-net/sandbox
That’s all from the Gemba.