I'm currently working on creating a grid layout with 4 images in a row using DaisyUI card component. However, I've run into an issue where there is white space at the bottom of some images due to varying image heights. Is there a solution that would allow me to make all images the same height without affecting their quality?
Below is the code snippet:
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 have not applied any custom CSS and am relying solely on Tailwind for styling.
Any assistance will be greatly appreciated!
If needed, here is an example showcasing the issue: The yellow book displays the problem.