title: Material UI : CardMedia Round Image
body: <p>I'm new in full stack developing and I'm trying to code something to understand better frontend with React JS and 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:</p>
  <pre><code>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: &quot;flex&quot;,
          marginBottom:20,
  
      },
      image:{
          minWidth: 100,
          minHeight: 100,
          borderRadius: '50%',
          objectFit: 'cover'
          
      },
      content:{
          objectFit: 'cover'
      }
      
      
  
  }
  
  class Post extends Component {
  return (
              &lt;Card className={{root: classes.card}}&gt;
                  &lt;CardMedia
                      image={userImage}
                      title=&quot;Profile image&quot;
                      className={classes.image}
                      /&gt;
                      
                      
                      &lt;CardContent className={classes.content}&gt;
                          &lt;Typography 
                              variant=&quot;h5&quot;
                              component={Link} 
                              to={`/users/${userHandle}`} 
                              color=&quot;primary&quot;&gt;
                              {userHandle}
                          &lt;/Typography&gt;
                          {deleteButton}
                          &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot;&gt;
                              {dayjs(createdAt).fromNow()}
                          &lt;/Typography&gt;
                          &lt;Typography variant=&quot;body1&quot;&gt;{body}&lt;/Typography&gt;
                          
                      &lt;/CardContent&gt;
              &lt;/Card&gt;
          )
  }
  Post.propTypes = {
      user: PropTypes.object.isRequired,
      post: PropTypes.object.isRequired,
      classes: PropTypes.object.isRequired,
      openDialog:PropTypes.bool
  }
  
  const mapStateToProps = state =&gt;({
      user: state.user
  })
  
  
  export default connect(mapStateToProps)(withStyles(styles)(Post));
  
  
  </code></pre>
  <p>But the image looks oval and stretched. How can I resolve this ?</p>