Make images take the same height

September 30, 2022

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

>Solution :

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.