Image in Grid Item overflowing in React using Material UI

Question

My image in overflows past the boundary of my grid. I think it is because it sizes to the exact size but I am not sure why because I specify that the image can only contain up to sm={6} which it does not do. The code and image is below.

class Intro extends React.Component {
render() {
    return (
        <Grid container className="intro">

            <Grid item xs={12} sm={6}>
                <img src={IntroFood} alt="Restaurant Intro Food" className="introImg" />
            </Grid>

            <Grid item container direction="column" xs={12} sm={6} alignContent="center" justify="center">
                <Typography variant="body1">{this.props.desc} </Typography>
                <Button>Go to Menu</Button>
            </Grid>
        </Grid>

    );
}

}

I am calling this code in the App.JS likeso: P.S this is also only a snippet but every component on the website is essentially a Grid item

`

  {/* Header */}
  <Grid item>
    <NavBar restaurantName="test" address="test addrr" phoneNum="test phone" />
  </Grid>

  {/* Intro */}
  <Grid item className="pad">
    <Intro desc="Hi there and welcomhis message will be repeated 100x. Hi there and welcomhis message will be repeated 100x. Hi there and welcomhis message will be repeated 100x. Hi there and welcomhis message will be repeated 100x. Hi there and welcomhis message will be repeated 100x. Hi there and welcomhis message will be repeated 100x. Hi there and welcomhis message will be repeated 100x. Hi there and welcome to this restaurant. This message will be repThis message will be repeated 100x"/>
  </Grid>

Here is the result that is displayed `

Answer 1

you may want to style your image to have a max-width of 100% so it won't exceed parent size.

.introImg {
  max-width: 100%;
}

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

source: MDN