如何在 Material-UI 中使图像响应

Question

我正在尝试使页面响应，但是我无法使图像响应，因为它正在脱离材质 UI 中的网格容器。有什么方法可以使图像具有响应性吗？我正在尝试将图像添加到网格容器中，但它仍然显示相同的内容。

import React from "react";
import "./styles.css";
import {
  Typography,
  Container,
  Grid,
  Button,
  CssBaseline
} from "@material-ui/core";
import useStyles from "./styles";
import Pic from "../../Assets/Images/manOnTable.svg";

const Home = props => {
  const classes = useStyles;

  return (
    <React.Fragment>
      <CssBaseline />

      <Grid container className={classes.root} style={{ height: "auto" }}>
        <Grid container sm={6} xs={12}>
          <Grid container style={{ padding: "20%" }}>
            <Grid item sm={12} xs={12}>
              <Typography variant="h3" color="textPrimary" gutterBottom>
                Hello, there.
              </Typography>
              <Typography variant="h5" paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </Typography>

              <Button
                variant="contained"
                color="primary"
                target="_blank"
                href="https://www.google.com/"
                disableElevation
              >
                Resume
              </Button>
            </Grid>
          </Grid>
        </Grid>

        <Grid container sm={6} xs={12}>
          <Grid container style={{ padding: "20%" }}>
            <Grid item sm={12} xs={12}>
              <img src={Pic} style={{ height: "50vh", width: "50vh" }} />
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </React.Fragment>
  );
};

export default Home;

Answer 1

只需将其添加到 css 样式中即可

img {
    max-width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

Answer 2

在图像标签中，您将高度和宽度设置为 50vh。如果认为合适，视口单位（vh 或 vw）将导致内容溢出容器。在您的情况下，一切都按预期工作，图像占据了视口高度的 50% (637/2 = 319px)。如果需要的话，它会溢出网格容器以满足这些尺寸。

您可能应该让图像本身具有 width: 100% height: 100% 或 width: 100% height: auto 并通过容器控制图像的大小（就像您已经在做的那样）。

希望这对您有帮助，如果您有疑问，请告诉我。