Search code examples
javascriptimagenext.jsfrontendgrid

With Next 13, how do you display images in a grid with the same width and height despite having various dimensions?

In Next 12, my blog has a component that fits images to have the same dimensions

    <div
      key={title}
      className="flex flex-col rounded-lg shadow-lg overflow-hidden"
    >
      <div className="flex-shrink-0">
        <Image
          className="w-full object-cover"
          height={300}
          width={600}
          src={cover_image}
          alt={title}
        />
    </div>

the website looks as following enter image description here

However, on new update the image are all over the place enter image description here

From further inspection it seems to be related directly to original image dimensions. However, the image dimensions on next/image height and width do not seem to work.

Solution 
  • import Image from "next/legacy/image";

    solves the issue temporarily