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

Question

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

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

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

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

希望对您有所帮助，如果您有任何问题，请告诉我。

Answer 2

只需将此添加到 css 样式

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

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

How to make image responsive in Material-UI

javascript

image

reactjs

material-ui

responsive