I’m trying to make a website and using this Canadian politicians site as a reference. I like how his navbar and join components layer on top of his picture, and how his picture is a fixed length and resizing the window resized the picture only a little bit based on the layered components but also keeps the aspect ratio correct and unstretched.
My first problem is I’m using NEXT.JS Image components and I can’t figure out how to make it copy that behaviour of not stretching while maintaining a fixed size.
I’m a python boy I just got put on this project so my second problem is I made a nav bar component and am going to get around to the component in place of his join component, but I can’t figure out how his website layers so nicely. In what direction should I look into. Thank You!
Advertisement
Answer
This is more of a css issue than a NEXT.JS issue.
The key is to use an image as a background of a <div> tag (or any tag), rather than an <img> tag. Use the following properties
background-image: url('....');
background-position: center;
background-size: cover;
background-repeat: no-repeat;