Are you ready to stop the tyranny of weird sizing problems?

Your boss bought some picture. They want you to cram that picture into some UI component, and they want it to look perfect EVERYWHERE (with a capital E). 2 months from now they open their website on their phone and see their image cut into a little box, or perhaps the image is disproportionally squashed.

There is a way to solve our problems on all screen sizes, all card sizes, or any other use-case. Let’s figure it out.

Default Behavior

Import an image into our component, put it on the page. This is what happens.

Suppose you make some container that is some size relative to the viewport. I’ll save you the research. There are more than 10,000 different screen sizes across various consumer devices. There are phones as small as 360px wide. There are 5k iMacs. Maybe a person is using their computer on a 4k TV. I’ve seen it all. Better yet, your user can simply resize the browser window to look at something else.

Your pictures will never match the ratio of the viewport. Your browser will dilate the picture accordingly, making this stretched look.

#javascript #react #ui #programming #coding