Design comparison
Solution retrospective
Hi everyone, I just want some feedback about best practices when trying to display one image or another, so when I did the design for mobile I needed to use the mobile version of the image, and then for desktop the larger one, but needed to use JavaScript for that
Is any possible way to do this with CSS that I'm missing? Or it just can be done with JavaScript only?
Thanks in advance for any other tip or recommendation.
Community feedback
- @lifeaddiktPosted about 2 years ago
You can do it again more simple than using CSS. Use the <picture> tag with <source> tags. Inside a picture tag you can have multiples sources tags which have media attribute. Media attribute says the max-width or min-width of the screen and use the good src.
Sorry i dont speak english very well.
Check that : https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture
Hope it will help
Marked as helpful2@874anthonyPosted about 2 years ago@lifeaddikt Hey man, don't worry, your english was good enough to understand everything you said, big thanks for linking that resource, didn't knew about that use of the picture tag. This is what I was looking for. Thanks for this one.
0 - @halderjoydeepPosted about 2 years ago
Hi Anthony, instead of javascript, you can use two img. one for desktop version and one for mobile. on desktop screen, make mobile image display to none. and for mobile screen, make desktop image display to none.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord