材质 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'

    }

    

    

}

但图像看起来呈椭圆形且被拉伸。我该如何解决这个问题？

Answer 1

从图像的 css 中，您设置了 minHeight 和 minWidth。您需要明确地将高度和宽度设置为等于 px。让我知道这是否有效。