[英]Material UI : CardMedia Round Image
I'm new in full stack developing and I'm trying to code something to understand better frontend with React JS and Material UI.我是全栈开发的新手,我正在尝试编写一些代码来更好地理解 React JS 和 Material UI 的前端。 I've used a card component to show posts in backend but I want to show profile image (via CardMedia) circular, so I've decided to override the component like this:
我使用卡片组件在后端显示帖子,但我想显示个人资料图片(通过 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));
But the image looks oval and stretched.但是图像看起来是椭圆形的并且被拉伸了。 How can I resolve this?
我该如何解决这个问题?
From your css for the image, you've set a minHeight and minWidth.从图像的 css 中,您设置了 minHeight 和 minWidth。 You'd want to explicitly set the height and width to equal px.
您希望将高度和宽度显式设置为等于 px。 Let me know if that works.
让我知道这是否有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.