@Jorggyh
Posted
Well done!
You used only the desktop image?
You can use two different images, one for mobile and one for desktop, and that's the idea, you can do it with the picture tag, something like this:
<picture>
<source media='(max-width: 799px)' srcset='images/image-product-mobile.jpg' type='image/jpg'>
<img alt=' ' images/image-product-desktop.jpg'>
</picture>
Or adding the images as background in the css, in mine I did the following, the mobile version:
#img {
background: no-repeat center center/cover url("../img/image-product-mobile.jpg");
height: 24rem;
border-radius: 0.8rem 0.8rem 0 0;
}
and the desktop version, inside the media query:
#img {
background: no-repeat center center/cover url("../img/image-product-desktop.jpg");
width: 30rem;
height: 100%;
border-radius: 0.8rem 0 0 0.8rem;
}
@hernanruscica
Posted
@Jorggyh thanks for your comment. At first i try to make it with the background option that you mentioned, but later i think that use just one image is a better challenge. I really apreciate this solution with the source media, that I did not know. Thanks for your time !