卡的蚂蚁设计

Question

我需要使图像显示在ant设计卡片的全宽度

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(() => {
// Wait for 3 seconds
setTimeout(() => {
setIsLoading(false);

}, 8000);
}, []);

return (
<div  className='homeContainer'  >




<div  >

<Card className='card' onClick={() => setModal2Open(true)} loading={isLoading} cover={<img alt="example" src={mvp}  loading={isLoading} hoverable/>}
>
<Title level={3} >Nombre de la comida</Title>

<Text> Precio </Text>
<ClockCircleOutlined />
<Text>
<img width='3%' src={delivery}></img> 15-20min 

</Text>

<Text>
Envio Gratis
</Text>
<DollarOutlined />

</Card>
</div>    
</div>
)
}
export default CardsComida;

我试着用Style，但是没有用，我试了几种方法。我希望它看起来像一张rappi卡，就像它在imageExample

中出现的那样ant设计并没有给出解决它的信息。到目前为止，图像只被放置在小尺寸的角落

Answer 1

使用网格，并设置border-shadow