I'm making a grid of 4 images in a row using DaisyUI card. However some images have white space at the bottom due to different image heights. Is there a way I can make all of them take the same height without compromising image quality?

Here's the code:

import React from "react";

const Book = ({ book }) => {
  return (
    <div className="card card-compact w-56 bg-base-100 shadow-xl">
      <figure>
        <img src={book.img} alt="Books" />
      </figure>
    </div>
  );
};

export default Book;

I haven't used custom CSS for this. I'm using Tailwind. Help appreciated! Here's a snippet: The yellow book is a good example of the issue

CodePudding user response：

If you can use custom CSS, try this:

.card > figure, .card > img {
    width: 100%;
    height: 100%;
}

.card > img {
    object-fit: cover;
}

This will make the figure and img elements use up 100% of the height and width of their respective containers, and make the img element make sure that it will retain its aspect ratio while scaling up.

CodePudding user response：

Simplest way - This will keep the image size as it is and fill the other area with space, this way all the images will take same specified space regardless of the image size without stretching

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

CodePudding user response：

• It is possible when you pick images with same aspect ratio.
• You can add h-full w-full to make full size image but this will stretch your image in case of height. So, it is better you use images of same aspect ratio.