如何在 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 styles

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