材料ui卡介质高度作为纵横比还是使用vh

Question

const useStyles = makeStyles({
media: {
height: 183
}
});
<CardMedia
className={classes.media}
image="pic.jpg"
/>

这让我设置大小(以像素为单位(。有没有办法将其设置为纵横比？例如，在300像素宽的卡上它是200像素高，而在600像素宽的卡片上它是400像素高？这将是我喜欢的方式。

作为替代方案，我如何使用vh作为高度？

Answer 1

看起来我至少为较小的屏幕找到了一个可接受的解决方案。希望我能用'100vw'*1.778而不是100。但现在它的规模还可以。

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>
);
}