材料设计反应响应卡

Question

嗨，我是一个新的材料设计，我试图使卡片部分响应媒体查询和Flex。由于某种原因，当卡片切换到列时，只显示图像的一部分，而卡片的其余部分（如文本）不再显示。我发现让组件响应非常混乱。我是不是漏掉了什么？

const renderCard = (card, index) => {
    
    return (
      
            <>
            
            <Card elevation={6} key = {index} className='services-card'>
            <CardMedia className ='services-card-img' image={card.img}/>
            <CardHeader title={card.title}/>
            <CardContent>
                <Divider className='services-card-divider'/>
                <p>
                    {card.desc}
                </p>
            </CardContent>
        </Card>
        </>
        )
    }
    
    return (
        <div>
        <div>
            <h1 className='title-black-red'>Services</h1>
            </div>
        <div className='services'>
           {data.map(renderCard)}
        </div>
        </div>
    );
}


.services {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 600px;
  background-color: white;
  align-items: center;
  flex-direction: row;
  margin: 20px 0px 150px 0px;
}

@media all and (max-width: 800px) {
  .services {
    flex-direction: column;
  }
  .services-card {
    margin: 10px;
    background-color: green;
  }
}

.services-card {
  height: 80%;
  width: 350px;
  padding: 10px;
  margin: 50px;
}

.services-card-divider {
  color: red;
}
.services-card-img {
  height: 180px;
}

Answer 1

尝试向图像添加背景大小的样式

 background-size: cover;