I am faced with the challenge of making an ImageListItem occupy all available space within a card. The goal is to have a rounded Card with an image background and a text bar at the bottom. However, I am struggling to get the ImageListItem to expand beyond the height of the image itself. My objective is to stretch both the image and the bar to fully fill the space within the card.
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>
Illustration of Card with ImageListItem
Expected Behavior: Card fills in the blue area with the image
Despite experimenting with attributes like minHeight=100% and height=100% throughout the code, I have not been successful in achieving the desired outcome.