logo标签列表

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

cssreactjsmaterial-ui
4
我正在尝试解决一个问题，即当我调整浏览器大小时，我的背景图片出现了问题。我的应用程序中的背景图片高度设置为“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%'
    }

任何建议？谢谢。
1个回答
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接