Next.js + Tailwind: how to make images be uniform

I don't know how could I make them have the same height or aspect ratio. This is my whole component:

export default function ProductItem({ product, index }: ProductItemProps) {
  const { type, size, price, img_url, discount, brand } = product

  return (
    <div className="w-[20%] flex-grow-0 ">
      <div className="object-cover ">
        <Image
          src={img_url[0]}
          alt={'product-image'}
          width={100}
          height={100}
          className="block w-full"
          priority={index + 1 < 9}
        />
      </div>
      <div className="bg-darkgrey w-full py-4 text-center text-[0.75rem] font-medium text-white">
        <span>ADD TO CART</span>
      </div>
      <div className="text-content text-[0.75rem] font-semibold">
        <div className="flex justify-between">
          <span>{capitalize(brand)}</span>
          <span>{size}</span>
        </div>
        <span className="block text-[0.75rem] font-light text-gray-200">{type}</span>
        <span>€{price}</span>
      </div>
    </div>
  )
}

export default function ProductItem({ product, index }: ProductItemProps) {
  const { type, size, price, img_url, discount, brand } = product

  return (
    <div className="w-[20%] flex-grow-0 ">
      <div className="object-cover ">
        <Image
          src={img_url[0]}
          alt={'product-image'}
          width={100}
          height={100}
          className="block w-full"
          priority={index + 1 < 9}
        />
      </div>
      <div className="bg-darkgrey w-full py-4 text-center text-[0.75rem] font-medium text-white">
        <span>ADD TO CART</span>
      </div>
      <div className="text-content text-[0.75rem] font-semibold">
        <div className="flex justify-between">
          <span>{capitalize(brand)}</span>
          <span>{size}</span>
        </div>
        <span className="block text-[0.75rem] font-light text-gray-200">{type}</span>
        <span>€{price}</span>
      </div>
    </div>
  )
}

5 Replies

glutonium•14mo ago

i never used talwind nor next but i can give u da idea here the easiest way would be in the case where u have images of different aspect ratio, what u can do is yse a div for image holder, give it a fixed height and width that u want the images to be then give the images

height: 100%;
width: 100%;
object-fit: cover;

height: 100%;
width: 100%;
object-fit: cover;

doing so the images will zoom or shrink to fit the div

beroerOP•14mo ago

excellent advice, thanks a lot, it worked!

glutonium•14mo ago

beroerOP•14mo ago

clevermissfox•14mo ago

Careful with heights, and test it at different breakpoints too. I would actually recommend an aspect-ratio instead with the object for cover.

Gaming

Programming

Next.js + Tailwind: how to make images be uniform