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

问题描述

我正在尝试使页面具有响应性，但是我无法使图像具有响应性，因为它正在脱离材质 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;

标签： javascriptreactjsimagematerial-uiresponsive

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

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

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

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

问题描述

解决方案

推荐阅读