Next.js Discord

Discord Forum

how image in hero can be adjusted

Answered
codecret posted this in #help-forum
Open in Discord
codecretOP
how can i use next/image to dynamically resize the image property?
i don't want it to take full space just around 80vw
Answered by codecret
SOLVED!
the fill layout mode of the Image component requires the parent element to have a relative position.
View full answer

10 Replies

American Chinchilla
What is your current code?
For the image
Usually you would use the fill prop on the image
And the parent element will have the size like 80vw
codecretOP
import styles from "@/app/ui/home.module.css";
import Image from "next/image";

export default function Page() {
  return (
    <main className="">
      <div className={styles.coverDiv}>
        <Image src="/cover.png" alt="Logo" fill />
      </div>
    </main>
  );
}
.coverDiv {
  width: 80vw;
  height: 200px !important;
  position: relative; // solution!
}
its just filling whole screen
codecretOP
SOLVED!
the fill layout mode of the Image component requires the parent element to have a relative position.
Answer
codecretOP
but im not sure why it looks weird ? @American Chinchilla
American Chinchilla
@codecret what do you mean that it looks weird? Do you mean why there are empty white spaces or why the text is not aligned with the image?