REST Countries API built with Next.js/React.js, styled with SCSS
Design comparison
Solution retrospective
Hi fellow coders, Here is my final solution. The most difficult part was figuring out how to display the flag images, as they are all different sizes. I decided to "crop" a number of them on the home page so they would all appear as the same size, rather than distorting the dimensions. I'm curious if anyone has a better solution for this? I also decided to concurrently update the "results" on the home page as the user types into the search input element, rather than waiting for them to press enter. It seems to work fine but I'm wondering if that would be a bad idea for someone with a slower device? Not sure. Any other feedback is welcome! Thanks.
Community feedback
- @Aycom366Posted about 3 years ago
Hi James nice job with the project concerning the issues of different flag sizes. most times I normally wrap my image inside a container and give that container explicit height or width or even max-width which is recommended. then I set the image object-fit property to cover, width and height to 100%. following this method will always make the image fill the container no matter how big the image is.
Marked as helpful0@JamesTheLessFCPosted about 3 years ago@Aycom366 Thanks! That's exactly what I ended up doing, so I guess I went about it the right way.
0
Please log in to post a comment
Log in with GitHubJoin 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