There is a rule of physics that says cats are able to take the shape of any container. I’m proving that it’s true, even in the browser. CLICK HERE TO SEE FOR YOURSELF!! Keep reading to see how I did it.
I created a website that responds whenever someone resizes the window. To do this, I used the resize function in Jquery.
From there it was a simple matter of determining which images I wanted to display. I tried to match the width/height ratio, width in pixels, and height in pixels to the images I used for the cats.
Here’s the CSS I used on the cat images. The units ‘vh’ and ‘vw’ are units that are relative to the viewport. I had them both at 100 to fill the entire window. The object fit was used to make sure that the images maintained their original ratios, making sure the images didn’t scale weirdly.