材料 ui cardmedia 高度作为纵横比还是使用 vh？

Question

const useStyles = makeStyles({
  media: {
    height: 183
  }
});

<CardMedia
  className={classes.media}
  image="pic.jpg"
/>

This let´s me set the size in px. Is there a way to set it to an aspect ratio? For example on 300px wide card it´s 200px high and on 600px wide card its 400px high? This would be my preferred way.

As alternative, how could I use vh for the heigth?

Answer 1

Looks like I found an acceptable solution for smaller screens at least. Wish I could use '100vw'*1.778 instead of just 100. but now it scales okay-ish.

    media: {
        width: '100vw', //this gives me full width
        height: props => 100 * props.ratio,
    },
});

export default function MediaCard() {
    const classes = useStyles({ratio: 1.778});

    return (
        <Card className={classes.root}>
            <CardActionArea>
                <CardMedia
                    className={classes.media}
                    image={michel}
                    title="Michel"
                />
            </CardActionArea>

        </Card>
    );
}