0

Next IMAGE autoshrinks the image despite specifying fixed layout as you add more content to the other flex row element. Here's the example sanbox: https://codesandbox.io/s/fragrant-water-ecgqpc?file=/pages/index.js:495-513

Expected Behaviour is image size should be conserved at least in fixed layout mode, but the more text you add to the field label:

import React from "react";
import Image from "next/image";
export default function IndexPage() {
  return (
    <div>
      <div
        style={{
          width: "25rem",
          height: "10rem",
          background: "red",
          display: "flex"
        }}
      >
        <Image
          alt="Empty test"
          src="/avatar-02.jpg"
          height={160}
          width={160}
          layout="fixed"
          style={{ flexShrink: 0 }}
        />
        <label>
          Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
          Ipsum
        </label>
      </div>
    </div>
  );
}

the smaller image becomes. Can someone help me understand why is this happening?

How it looks after resizing:

enter image description here

How it should actually look since the layout is fixed image with fixed height and width:

enter image description here

Shivam Sahil
  • 4,055
  • 3
  • 31
  • 62
  • codesandbox is working ? its throwing some error – bogdanoff Apr 30 '22 at 16:21
  • Hmm NEXT Image error, huh, it works while creating the project but throws this error when recompiling it :/ – Shivam Sahil May 01 '22 at 04:29
  • anyway I think your image is not stretching as you expected is because of flexbox container. so wrap image component with a div and may be add `flex: 1 1 auto;` to that div if still doesnt work. – bogdanoff May 01 '22 at 09:16

0 Answers0