文章/答案/技术大牛

发布

社区首页 >问答首页 >ImageListItem Img占据了所有的卡空间吗？

问ImageListItem Img占据了所有的卡空间吗？
EN

Stack Overflow用户

提问于 2022-06-17 01:21:23

回答 1查看 50关注 0票数 0

我最终想让ImageListItem占据卡内的所有可用空间。(我想要一张圆圆的卡片，底部有一个文字栏的图像背景)。我不能让ImageListItem超过图像的高度。我想伸展图片和条形来占据卡片中的所有空间。

MyComponent

<Card key={item.name} sx={{ width: 'auto', height: 'auto', aspectRatio: '1 / 1' }}>
    <CardContent sx={{ padding: 0, maxHeight: '100%' }}>
        <ImageListItem sx={{ maxHeight: '100%', padding: 0 }}>
            <img
                src={`${item.img}?w=248&fit=crop&auto=format`}
                srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
                alt={item.name}
                loading="lazy"
            />
            <ImageListItemBar title={item.name} subtitle={item.sciName} />
         </ImageListItem>
     </CardContent>
 </Card>

带ImageListItem的卡

期望卡片用图像填充蓝色区域

我试过把minHeight=100%，height=100%和其他属性扔到任何地方，却没有运气..

material-ui

react-component

css

reactjs

回答 1

Stack Overflow用户

发布于 2022-06-17 04:21:32

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

尝试这样做，并为image.and添加一个边距和填充以添加圆角，您可以简单地添加css属性“边框-半径: 5px;”。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72653406

复制

相似问题

问ImageListItem Img占据了所有的卡空间吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ImageListItem Img占据了所有的卡空间吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ImageListItem Img占据了所有的卡空间吗？
EN