如何在 Material UI 中使背景图像响应

Question

当我调整浏览器大小时，我试图解决背景图像的问题。我将应用程序上的背景图像高度设置为“100vh”，它填充整个页面。当我将浏览器调整为较小的宽度时，背景图像会被切断。当页面响应时，将高度更改为“100%”可以解决此问题，但当我回到常规桌面大小时，100% 会显示图像被截断，因为它只填充 div 大小的背景。

我正在使用材质用户界面。我将如何响应地改变背景大小？

DOM

return <main className={content}>                      

CSS

content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    height: '100vh',
    textAlign: 'center',
    backgroundImage: `url(${Background})`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    backgroundSize: "cover",
    backgroundAttachment: "fixed",
  },

我尝试将其添加到我的内容样式类中，但没有什么区别

[theme.breakpoints.down('lg')]: {
      height: '100%'
    }

有什么建议么？谢谢

Answer 1

因此，如果您正在material-ui 中寻找响应式图像的类，则没有响应式图像的类。但您可以尝试使用grid、container或breakpoint布局。
请参考：
https://material-ui.com/components/container/
https://material-ui.com/customization/breakpoints/
https://material-ui.com/components/grid/
https://material -ui.com/guides/responsive-ui/