使用 Material UI 在 React 中溢出的网格项目中的图像答案

【问题标题】：Image in Grid Item overflowing in React using Material UI使用 Material UI 在 React 中溢出的网格项目中的图像
【发布时间】：2020-07-25 04:44:38
【问题描述】：

我的图像超出了我的网格边界。我认为这是因为它的大小精确到了大小，但我不知道为什么，因为我指定图像最多只能包含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 这也只是一个 sn-p 但网站上的每个组件本质上都是一个 Grid 项目

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

这是显示的结果 `

【问题讨论】：

标签： reactjs grid material-ui

【解决方案1】：

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

.introImg {
  max-width: 100%;
}

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

来源：MDN

【讨论】：