材料设计React响应卡
材料设计React响应卡
提问于 2021-04-14 23:13:05
嗨，我是材料设计的新手，我正在尝试使用媒体查询和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;
}
回答 3
Stack Overflow用户
发布于 2021-04-14 23:17:51
尝试添加背景大小的样式到您的图像
background-size: cover;Stack Overflow用户
发布于 2021-04-14 23:20:13
看起来你有CardMedia组件，这个组件有img。因此，尝试对图像应用以下样式：
img {
max-width:100% !important;
height: auto;
display: block;
}Stack Overflow用户
发布于 2021-04-21 23:55:47
所以实际的问题是我的div (包含这些卡片)有一个设定的高度，因此这些卡片不能很好地适应。通过将高度设置为100%即可修复此问题。感谢大家的建议。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67094384
复制相关文章
相似问题
腾讯云开发者
