材質 UI：CardMedia 圓形圖像

Question

我是全棧開發的新手，我正在嘗試編寫一些代碼來更好地理解 React JS 和 Material UI 的前端。 我使用卡片組件在后端顯示帖子，但我想顯示個人資料圖片（通過 CardMedia）循環，所以我決定像這樣覆蓋組件：

import React, { Component } from 'react'
import {Link} from 'react-router-dom';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import DeletePost from './DeletePost'
import PostDialog from './PostDialog'
//MUI
import withStyles from '@material-ui/core/styles/withStyles'
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';
import ChatIcon from '@material-ui/icons/Chat'
import MyButton from '../../utils/MyButton';

const styles = {
    card: {
        display: "flex",
        marginBottom:20,

    },
    image:{
        minWidth: 100,
        minHeight: 100,
        borderRadius: '50%',
        objectFit: 'cover'
        
    },
    content:{
        objectFit: 'cover'
    }
    
    

}

class Post extends Component {
return (
            <Card className={{root: classes.card}}>
                <CardMedia
                    image={userImage}
                    title="Profile image"
                    className={classes.image}
                    />
                    
                    
                    <CardContent className={classes.content}>
                        <Typography 
                            variant="h5"
                            component={Link} 
                            to={`/users/${userHandle}`} 
                            color="primary">
                            {userHandle}
                        </Typography>
                        {deleteButton}
                        <Typography variant="body2" color="textSecondary">
                            {dayjs(createdAt).fromNow()}
                        </Typography>
                        <Typography variant="body1">{body}</Typography>
                        
                    </CardContent>
            </Card>
        )
}
Post.propTypes = {
    user: PropTypes.object.isRequired,
    post: PropTypes.object.isRequired,
    classes: PropTypes.object.isRequired,
    openDialog:PropTypes.bool
}

const mapStateToProps = state =>({
    user: state.user
})


export default connect(mapStateToProps)(withStyles(styles)(Post));

但是圖像看起來是橢圓形的並且被拉伸了。 我該如何解決這個問題？

Answer 1

從圖像的 css 中，您設置了 minHeight 和 minWidth。 您希望將高度和寬度顯式設置為等於 px。 讓我知道這是否有效。