如何在反应材料ui CardMedia组件中包含图像答案

【问题标题】：How to contain images in react material ui CardMedia component如何在反应材料ui CardMedia组件中包含图像
【发布时间】：2021-02-12 11:41:46
【问题描述】：

某些图像要大得多，其中一部分被隐藏了：

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

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;

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

【问题讨论】：

标签： reactjs material-ui contains

【解决方案1】：

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

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

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

【讨论】：

这就像魔术一样非常感谢@Giovanni。我还必须在媒体课上摆脱身高，但确实做到了。
@LukasLukeStateczny 很高兴听到这个消息。 Ciao Ciao =)
@GiovanniEsposito 这很好用。谢谢您的回答！我使用链接作为组件，因此我可以单击图像以导航到该项目，但这会破坏图像的尺寸。知道现在该组件是 img 如何实现某种链接吗？谢谢！
@MurphyAdam 没问题，很高兴为您提供帮助。要点击CardMedia，您可以使用onClick prop：onClick={() => console.log("navigate to the item")}。