reactjs - 使用 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 中这样调用这段代码: P.S 这也只是一个片段，但网站上的每个组件本质上都是一个网格项目

`

  {/* 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%;
}

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.

来源:MDN