如何让Ant Design Card中的图片铺满卡片宽度？

要让Card的cover图片铺满卡片宽度，实现类似Rappi卡片的效果，可以通过以下两种方式解决：

方法一：内联样式直接控制图片 #

直接给cover中的<img>标签添加样式，强制宽度铺满容器，同时保持图片比例：

<Card 
  className='card' 
  onClick={() => setModal2Open(true)} 
  loading={isLoading} 
  hoverable // 注意：hoverable是Card组件的属性，需移到此处
  cover={<img 
    alt="example" 
    src={mvp} 
    loading={isLoading} 
    style={{ width: '100%', height: 'auto', objectFit: 'cover' }} // 关键样式
  />}
>
  {/* 卡片内部内容 */}
</Card>

• width: 100%：让图片宽度铺满卡片封面容器
• height: auto：保持图片原始宽高比
• objectFit: 'cover'：让图片裁剪多余部分以铺满容器，避免拉伸变形，和Rappi卡片效果一致；若想完整显示图片，可替换为objectFit: 'contain'

方法二：CSS类全局覆盖样式 #

在你的desing.css文件中添加以下样式，针对自定义的.card类下的封面图片：

.card .ant-card-cover img {
  width: 100% !important;
  height: auto;
  object-fit: cover;
}

使用!important是为了覆盖Ant Design默认的图片样式优先级，确保自定义样式生效。

额外修正点 #

你之前将hoverable属性写在<img>标签上是错误的，该属性属于Card组件，需移到Card标签上才能生效。

修改后的完整组件代码 #

import React, { useState, useEffect } from 'react';
import uno from '../images/dualComida.jpg'
import {
    Button,
    Space,
    Typography,
    Input,
    Select,
    message,
    Row,
    Divider,
    Form,
    Checkbox,
    Grid,
    Radio,
    Modal,
    Card
  } from "antd";
  import { SketchOutlined , SmileOutlined, SafetyCertificateOutlined, WomanOutlined, UserOutlined, LockOutlined, InfoCircleOutlined, IdcardOutlined, ClockCircleOutlined, DollarOutlined  } from "@ant-design/icons";

import Item from 'antd/lib/list/Item';
import mvp from '../images/dualComida.jpg'
import delivery from '../desing/delivery.svg'
import '../desing/desing.css'
const { Title, Text } = Typography;

function CardsComida({setModal2Open}) {
  const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
   setTimeout(() => {
     setIsLoading(false);
   }, 8000);
  }, []);
  
  return (
    <div className='homeContainer'>
      <div>
        <Card 
          className='card' 
          onClick={() => setModal2Open(true)} 
          loading={isLoading} 
          hoverable
          cover={<img 
            alt="example" 
            src={mvp} 
            loading={isLoading} 
            style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
          />}
        >
          <Title level={3}>Nombre de la comida</Title>
          <Text> Precio </Text>
          <ClockCircleOutlined />
          <Text>
            <img width='3%' src={delivery} alt="delivery" /> 15-20min 
          </Text>
          <Text> Envio Gratis </Text>
          <DollarOutlined />
        </Card>
      </div>    
    </div>
  )
}

export default CardsComida;

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