Next JS Button Link with Image
Unanswered
Kurilian Bobtail posted this in #help-forum
Kurilian BobtailOP
Hello everyone !
I'm new here, and it's been more than a Week since I started to use NextJS.
In fact, as a Fullstack Developper, I'm working on a prototype of static website (using next js and the bookwormlight theme + app Router) to present the company where i'm working. My boss also want me to have a professionnal and corporate frontend whil keeping a minimalist look.
I created several React components for doing my work and the goal is to create a button with an image inside it (and text displayed on top of the image) that redirects us to another page of the site.
To achieve this, in accueil.md I’m using two different React components:
• MenuButton.jsx: It acts as a button that redirects us to another page. It can contain HTML elements or even other components.
• NewImageWrapper.jsx: This is a div block with a variable size containing two things: an image (imported via next/image) and another div that can contain text and display it on top of the image.
To adjust the styling, I’m using classes from the TailwindCSS library, which I’m gradually becoming more familiar with.
However, I’m encountering a problem with the MenuButton when I test my site: when I display a NewImageWrapper component, there is padding above the top of the image.
Since NewImageWrapper is a parent div containing an image and another div, the goal was for the image to take up almost the entire space of the parent div, with a minimum of evenly balanced padding on each side. But right now, the image seems misaligned with the parent div, which creates a visual offset.
I tried modifying the following property used on the image:
https://tailwindcss.com/docs/object-fit
I also tried removing the overflow-hidden property, but that didn’t change anything.
Here is my github project and check the "bouton-menu" branch:
https://github.com/PaulNowak36/NextJS-Bookworm-site/tree/boutons-menus
If you have any ideas, thank you in advance.
I'm new here, and it's been more than a Week since I started to use NextJS.
In fact, as a Fullstack Developper, I'm working on a prototype of static website (using next js and the bookwormlight theme + app Router) to present the company where i'm working. My boss also want me to have a professionnal and corporate frontend whil keeping a minimalist look.
I created several React components for doing my work and the goal is to create a button with an image inside it (and text displayed on top of the image) that redirects us to another page of the site.
To achieve this, in accueil.md I’m using two different React components:
• MenuButton.jsx: It acts as a button that redirects us to another page. It can contain HTML elements or even other components.
• NewImageWrapper.jsx: This is a div block with a variable size containing two things: an image (imported via next/image) and another div that can contain text and display it on top of the image.
To adjust the styling, I’m using classes from the TailwindCSS library, which I’m gradually becoming more familiar with.
However, I’m encountering a problem with the MenuButton when I test my site: when I display a NewImageWrapper component, there is padding above the top of the image.
Since NewImageWrapper is a parent div containing an image and another div, the goal was for the image to take up almost the entire space of the parent div, with a minimum of evenly balanced padding on each side. But right now, the image seems misaligned with the parent div, which creates a visual offset.
I tried modifying the following property used on the image:
https://tailwindcss.com/docs/object-fit
I also tried removing the overflow-hidden property, but that didn’t change anything.
Here is my github project and check the "bouton-menu" branch:
https://github.com/PaulNowak36/NextJS-Bookworm-site/tree/boutons-menus
If you have any ideas, thank you in advance.
1 Reply
@Kurilian Bobtail Hello everyone !
I'm new here, and it's been more than a Week since I started to use NextJS.
In fact, as a Fullstack Developper, I'm working on a prototype of static website (using next js and the bookwormlight theme + app Router) to present the company where i'm working. My boss also want me to have a professionnal and corporate frontend whil keeping a minimalist look.
I created several React components for doing my work and the goal is to create a button with an image inside it (and text displayed on top of the image) that redirects us to another page of the site.
To achieve this, in accueil.md I’m using two different React components:
• MenuButton.jsx: It acts as a button that redirects us to another page. It can contain HTML elements or even other components.
• NewImageWrapper.jsx: This is a div block with a variable size containing two things: an image (imported via next/image) and another div that can contain text and display it on top of the image.
To adjust the styling, I’m using classes from the TailwindCSS library, which I’m gradually becoming more familiar with.
However, I’m encountering a problem with the MenuButton when I test my site: when I display a NewImageWrapper component, there is padding above the top of the image.
Since NewImageWrapper is a parent div containing an image and another div, the goal was for the image to take up almost the entire space of the parent div, with a minimum of evenly balanced padding on each side. But right now, the image seems misaligned with the parent div, which creates a visual offset.
I tried modifying the following property used on the image:
https://tailwindcss.com/docs/object-fit
I also tried removing the overflow-hidden property, but that didn’t change anything.
Here is my github project and check the "bouton-menu" branch:
https://github.com/PaulNowak36/NextJS-Bookworm-site/tree/boutons-menus
If you have any ideas, thank you in advance.
Poodle
You can try moving the border to the parent div instead of the image so your parent would have the border classes and the image stays clean. When you use next/image with fill and add a border directly to the image it messes with the sizing since the border adds pixels but the image is already trying to be 100% of the parent. If thats not it add leading-none to the parent div, sometimes line-height create invisible space above images. Also your repo link is giving 404 so make sure its public if you want people to check the code.