One of our customers at Whileone wants to build cards for their website which contains an image and some other content. Image will cover its container and should adjust its dimensions accordingly without cropping the image.
While Using Next.js Image and making it responsive we always faced one challenge that we need to keep the aspect ratio of image so that image will be neat and clean in given space.
We can do it by mentioning height and width of image at different breakpoints. Which is actually a time consuming and trial and error method, So we came up with a solution for this problem is css property called aspect-ratio.
Below is example Card, Let’s see it in two scenario, With Aspect Ratio and Without Aspect Ratio
I’m using Tailwind CSS for styling.
Fig. 1
1. Without Aspect Ratio:
Without aspect ratio we’ll have the same card on the mobile screen,
If we compare the below image (Fig. 2) with the first Image (Fig.1) the bottom corner part of the image get disappeared/cropped on the mobile screen.
Fig. 2
2. With Aspect Ratio:
With aspect ratio we’ll have the same card on the mobile screen,
If we compare the below image (Fig. 3) with the first Image (Fig.1) both are rendered properly.
That’s the advantage of Aspect Ratio Property.
Let’s see the code what exactly changed,
We are using two next image properties
Which means Image will take width and height from its parent, and by default Next Image has position absolute so we need its parent to be relative in position.
And we need to add the aspect ratio property to its parent, so the question arises, how can we calculate the aspect ratio of an image?
So, 1.5 is the aspect ratio for this particular image.
Fig. 3
Conclusion:
This blog intends to help you understand how aspect ratio works with Next Image, and how It helps us to build responsive images.
Here is CodeSandBox link of given example for better understanding, where you can see the code, make changes see the difference:
コメント