@thesohailjafri
Posted
First of all great work on Rest Countries🙌,
You can fix that image white space issue by using 'object-fit: cover' in CSS. Just define the width and height of image-div or img-tag and set object-fit to cover so that the image takes the whole div space.
@kpav33
Posted
@thesohailjafri thank you for you feedback.
I tried to implement your suggestion, but my issue still persists. I already have object-fit: cover set on image as its property, which causes some of the flags to not show nicely in their entirety. This is particularly noticeable on some of the flags. If you check out the flag of Belarus you will notice that it cuts off a sizeable piece of it and is therefore not accurate. This is the issue that I am still not certain how to solve.
@thesohailjafri
Posted
@kpav33
width: 260px; height: 160px;
these are my image size see if this helps.
@kpav33
Posted
@thesohailjafri,
this dimension do help with my problem, but unfortunately come flags are still not as nicely visible as I would like the to be. I think that the issue is with the fact that the country flag images are of different sizes and this is what is causing this problem.
Thanks for your help.
@thesohailjafri
Posted
@kpav33 yes some of the flags has different aspect ratio so that makes it difficult to have a component that fits all, you can try setting the height according to the flag size and adding extra space in component to compensate for that extra height.
hope it helps
