使用 Material UI 的 React 中网格项中的图像溢出

Question

我的图像溢出了网格的边界。我认为这是因为它的大小达到了精确的大小，但我不确定为什么，因为我指定图像只能包含sm={6}它不包含的内容。代码和图像如下。

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>

    );
}

}

我在 App.JS 中调用此代码，如下所示： PS 这也只是一个片段，但网站上的每个组件本质上都是一个网格项

`

  {/* 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>

这是显示的结果 `

Answer 1

您可能希望将图像的最大宽度设置为 100%，这样它就不会超过父级大小。

.introImg {
  max-width: 100%;
}

max-width CSS 属性设置元素的最大宽度。它可以防止 width 属性的使用值变得大于 max-width 指定的值。

来源：MDN