Question 300425 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How Do I Create Auto Height For NextJS Image Component In React JSX?

I want the aspect ratio to stay the same, whilst the width is fixed. Please help me automatically modulate the height. I would like to continue to use the Nextjs Image component if possible.

const Logo = ({ logo }) => {
  if (logo) {
    return (
      <Box
        sx={{
          width: "200px",
          // position: "relative",
          // overflow: "hidden",
          height: "fit-content",
          "& img": {
            transition: "transform .5s ease",
            "&:hover": {
              transform: "scale(1.05)",
            },
          },
        }}
      >
        <Image
          data-cy="employerPublicProfileLogo"
          objectFit="contain"
          layout="responsive"
          width={250}
          height={250}calculation
          placeholder="blur"
          blurDataURL="/hiredinchina-loading-image.jpg"
          src={logo}
          alt="Logo"
        />
      </Box>
    );
  }
};
Tags:

2

Answers


  1. 0

    To make the Image take all the space, you can use the prop "fill" without giving a hight or a width, then give the parent a position "relative" and the other styles you need.

    Login or Signup to reply.
  2. 0

    You could put the Image component inside a div and control the image height width by that div. Here is an example:

    <div className="Control_the_height_and_width_from_here">
     <Image
     src={`Your_image_src`}
     width="0"
     height="0"
     sizes="30vw"
     style={{ width: "100%", height: "auto" }}
     quality="100"
     />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search