Question

我正在尝试调整浏览器大小时解决背景图像问题。我将我的应用程序的背景图像高度设置为“ 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%'
    }

有什么建议吗？谢谢

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/

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

1 个答案: