Question

我正在尝试制作一个爱好社交媒体应用程序，它具有像 instagram 那样的图片帖子。我正在使用 React Material-UI 库来设计它。

为了显示每个帖子，我使用了 Card Component。图像本身位于 CardMedia 组件中。

代码如下：

const PostComponentAuthenticated = ({ post }) => {

    console.log(post.content[0].url)
    const classes = useStyles();
    return(
        <div>
            <Card className={classes.card}>
                <CardHeader
                    avatar={
                        <Avatar>
                            R
                        </Avatar>
                    }
                    title='Name'
                    subheader='date'
                />
                <CardContent className={classes.caption}>
                    <Typography variant="body2" color="textSecondary" component="p">
                        {post.content[0].text}
                    </Typography>
                </CardContent>
                <div className={classes.imageContainer}>
                    <img classname={classes.image} src={post.content[0].url}></img>
                </div>
                <CardActions className={classes.interactionsContainer}>
                    <IconButton className={classes.interactions}>
                        <ShareIcon />
                    </IconButton>
                    <IconButton className={classes.interactions}>
                        <ShareIcon />
                    </IconButton>
                </CardActions>
            </Card>

        </div>
    )
}

样式如下：

const useStyles = makeStyles(theme => ({
    card:{
        margin: '2px',
        height: 'auto',
        width: '100%',
        backgroundColor: 'red',
    },
    caption: {
        marginTop: '-20px'
    },
    imageContainer: {
        backgroundColor: 'yellow',
        width: '100%',
        height: 'auto'

    },
    image: {
        width: '100%',
        height: 'auto'
    },
    interactionsContainer: {
        display: 'flex',
        justifyContent: 'flex-end'
    },
    
    }
}));

我上传的图片大小不一。例如：1 张图片是 10801920 张图片，另一张是 720300 张图片。

我面临的问题是图像没有响应容器。我希望图像根据容器的宽度调整大小。

目前发生的情况是，当我减小屏幕尺寸时，里面的图像正在被剪切。例如：如果屏幕尺寸为 300 像素，则仅显示图像的前 300 像素。其余的是隐藏的。

我想要的是图像自行调整大小，容器（卡片组件）在屏幕大小改变时自行调整大小。

使用 CardMedia Material-UI React 时图像没有响应

0 个答案: