hi there! 🙌
There's no need to toggle images like this. You can use the <picture>
element for this:
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
</picture>
(just include another source tag with a different image )
or you can switch the image content within @media
queries
@media screen and (min-width: 45rem) {
.your-img_classname: {
content: url(your-img-path)
}
}
Hope this was helpful🙏
Good luck and happy coding! 💪
Marked as helpful
@xXOsielXx
Posted
@kodan96 Hi! Thank you for the feedback.
I clean my code by implementing your suggestions. Specifically the second one. This is my current code:
<img class="banner" src="images/image-product-mobile.jpg" alt="A bottle of perfume">
.banner {
border-radius: 8px 8px 0 0;
}
@media only screen and (min-width: 500px) {
.banner {
width: 50%;
content: url("images/image-product-desktop.jpg");
border-radius: 8px 0 0 8px;
}
}
I think this is the most optimized way of do it. Your comment was really helpful. Thank you very much.
Happy coding!