Struggling with Material-ui-next, I'm facing difficulties in making images take up the entire size of a container. Here's an example of my code:
const styles = theme => ({
Card: {
width: 300,
margin: 'auto'
},
Media: {
height: 550
}
});
Within the render method:
<Card className={classes.Card}>
<CardMedia
className={classes.Media}
image={ImgPomodoR}
title="a pomodoro tomatoe timer in material design"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
...
The documentation advises setting a height for the image to be displayed properly. Although, following the 'media' example and setting the image height to 0 did not work as expected - example reference.
I find myself trying out different values for the Media-height to ensure that it fits within the Card container without being cropped. Is there no automatic way of achieving this?
Any guidance or assistance on resolving this issue would be greatly appreciated,
Cheers, Tobias
Edit: It's worth mentioning that setting height: "100%" // maxHeight: "100%" has also proven ineffective in my case.