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

【问题标题】：How to make background-image responsive in Material UI如何在 Material UI 中使背景图像响应
【发布时间】：2019-10-26 07:24:00
【问题描述】：

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

我正在使用 Material UI。我将如何响应地更改背景大小？

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%'
    }

有什么建议吗？谢谢

【问题讨论】：

标签： css reactjs material-ui

【解决方案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/

【讨论】：