Search code examples
csssassflexboxcss-grid

Trouble adjusting images inside Cards

the thing I'm trying to do is fetch the countries data from an API and render all of them as cards on the page.

I'm facing trouble adjusting the size of flags because all of them have difference sizes.

enter image description here

I've applied width: 100%; to make them fit inside the card, and overflow: hidden to its parent card. But the height is not the same for which I tried to apply min-height: 50% that didn't completely do the job-

enter image description here

See the Australia flag? It gets white bars on top & bottom while there's no margin, etc., to the image. Could you please tell me how I can make them the same size?

https://codesandbox.io/s/fetch-countries-api-1ibwp?file=/src/index.js

Solution

  • Add to the images style:

    Object-fit: cover;