如何在DaisyUI卡片网格中让图片等高且不损失画质？

要在不损失画质的前提下让所有图片保持相同高度，你可以通过Tailwind的object-fit属性结合固定容器高度来实现，具体修改如下：

方案1：裁剪图片填满容器（推荐卡片布局） #

给figure容器设置固定高度，同时让图片占满容器并按比例缩放，超出部分裁剪，既保证高度统一，又不会拉伸图片损失画质：

import React from "react";

const Book = ({ book }) => {
  return (
    <div className="card card-compact w-56 bg-base-100 shadow-xl">
      <figure className="h-80"> {/* 自定义固定高度，可根据需求调整为h-72/h-96等 */}
        <img 
          src={book.img} 
          alt="Books" 
          className="h-full w-full object-cover" 
        />
      </figure>
    </div>
  );
};

export default Book;

• h-80：给图片容器设置固定高度，你可以根据布局需求调整这个数值。
• h-full w-full：让图片完全占满容器的宽高。
• object-cover：图片按比例缩放以填满容器，超出部分会被裁剪，保证图片比例正常、无拉伸变形。

方案2：完整显示图片（无裁剪） #

如果不想裁剪图片，希望完整展示，可使用object-contain，同时给容器设置背景色填充空白区域：

import React from "react";

const Book = ({ book }) => {
  return (
    <div className="card card-compact w-56 bg-base-100 shadow-xl">
      <figure className="h-80 bg-gray-100"> {/* 背景色填充空白 */}
        <img 
          src={book.img} 
          alt="Books" 
          className="h-full w-full object-contain" 
        />
      </figure>
    </div>
  );
};

export default Book;

这样图片会按原比例完整显示在容器内，空白部分由背景色填充，同样能保持所有卡片高度一致。

内容的提问来源于stack exchange，提问作者SpeedBird