Not sure if this is the correct way (set as background-image) to fit an image in a grid that would resize according to the size of the grid. I am also wondering whether a similar result could be achieved using an image tag in the HTML. I've tried with styles like {width: 100%; height: auto} or the reverse, but the image scales down too much when the width of the screen shrinks leaving blank space at the bottom.
Hi @Rita, I am Amine Elkhalidy, a Front-End web developer, and I want to help you with your solution if you don't mind
Using the image tag in this case would be better than setting it as a background image, you just need to wrapp it within a div tag, give the div some fixed height, and make the image 100% height and width of its parent, or just set the img tag style to height: auto; max-width: 100%
one other side note: whenever you have to create one dimensional layout use flex
Hope I helped, if not, or it's not clear what I said, I can help you on github
there was no information about how exactly the responsiveness would look on different screen sizes and I think it would depend on the website this component would be used in so I made the call to no go really deep on the responsiveness.
Hello @barbodGarsha, You have done an amazing job with this card, but you have a problem with small screen devices, if you inspect the code then resize the screen, you will see that the card is not fully displayed, so you have to make the min height of the whole page 100vh, then add more vertical padding
