title: Fit an image into a material-ui grid
body: <p>How to resize the image within grid, because every image has different dimensions so as they behave in Grid. I want to fit an image on top horizontal Grid, but when i set my desired height (e.g. height:'300px') instead of stretching and fitting into container, image become cropped. What should i do so that any image can fit into Grid container.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const backgroundImage = require('../../styles/img/grid/badshah.jpg');
  
  export default function Saifulmalok() {
  const classes = useStyles();
  return (
  &lt;React.Fragment&gt;
  &lt;Container maxWidth="lg"   &gt;
  
  &lt;Grid xs={12} justify="space-between"  
  style={{backgroundImage: `url(${backgroundImage})`,   
   height:'300px',
    marginTop: 20, 
    backgroundSize:'cover'
    }}&gt;
  &lt;/Grid&gt;
  
  &lt;/Container&gt;
  &lt;/React.Fragment&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>