如何在 React material ui CardMedia 组件中包含图像

Question

某些图片要大得多，部分图片被隐藏了：

我最接近正确的方法是调整宽度和高度：

const useStyles = makeStyles((theme) => ({
    ...

    media: {
        height: 100,
        width: 100,
        margin: 'auto',
    },

    ...
}));

const Brands = (props) => {
    ...

    return <div style={{ marginTop: props._marginTop }}>
        <Grid container justify='center'>
            <Grid item xs={10}>
                <Grid container spacing={2}>
                    {brands.map((brand, i)=> {
                        return <Grid item key={i} lg={3} xs={12}>
                                <Card>
                                    <CardMedia
                                        className={classes.media}
                                        image={brand.image.length > 0 ? brand.image : knightdemon}
                                        title={brand.name}
                                    />
                                    <CardContent>
                                        <Typography gutterBottom variant="h5" component="h2">
                                            {brand.name.toUpperCase()}
                                        </Typography>
                                        <Typography 
                                            onClick={()=>setFlip(true)} 
                                            className={classes.description} 
                                            gutterBottom variant="body2" 
                                            component="p"
                                        >
                                            DESCRIPTION
                                        </Typography>
                                    </CardContent>
                                </Card>
                        </Grid>
                    })}
                </Grid>
            </Grid>
        </Grid>
    </div>
}

export default Brands;

高度看起来都不错，问题是宽度，如果我增加宽度，它也会影响高度。 我如何将它们包含在给定的 space 中，使它们看起来像这样：

Answer 1

要使图像适合 CardMedia，请添加道具 component="img"，例如：

<CardMedia
    className={classes.media}
    image={brand.image.length > 0 ? brand.image : knightdemon}
    title={brand.name}
    component="img"
/>

这应该可以解决您的问题。