材质 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'//MUIimport 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。让我知道这是否有效。