CardMedia height material-ui

Question

Im struggling trying to change the height of the image inside the CardMedia

Im setting the style with

const style = {
  height: 32,
};

and using it in

<CardMedia
  overlay={<CardTitle title="Title"/>}
  mediaStyle={style}>

  <img src="imgUrl" />
</CardMedia>

but the height of the image remains the same. The only thing that happens is that the overlay with the title moves to the top. I've tried all the CardMedia properties but i havent succeeded

Answer 1

You need to apply the styles on the image directly:

<CardMedia overlay={<CardTitle title="Title"/>}>
  <img src={imgUrl} style={style}/>
</CardMedia>

Set desired width and height of the image, Card will adjust to the image.

Answer 2

try using style instead of mediaStyle, like

const Style = {
  height: 32,
};

    <CardMedia
      overlay={<CardTitle title="Title"/>}
      style={Style}>

      <img src="imgUrl" />
    </CardMedia>