reactjs - 如何在反应材料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;

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

标签： reactjsmaterial-uicontains

Answer 1

要适合图像CardMedia，请添加以下道具component="img"：

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

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