为了账号安全,请及时绑定邮箱和手机立即绑定

材质 UI:CardMedia 圆形图像

材质 UI:CardMedia 圆形图像

ITMISS 2024-01-18 14:54:41
我是全栈开发新手,我正在尝试编写一些代码来更好地理解 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'    }        }但图像看起来呈椭圆形且被拉伸。我该如何解决这个问题?
查看完整描述

1 回答

?
SMILET

TA贡献1796条经验 获得超4个赞

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



查看完整回答
反对 回复 2024-01-18
  • 1 回答
  • 0 关注
  • 34 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信