Я пытаюсь исправить проблему с фоновым изображением при изменении размера браузера.В моем приложении высота фонового изображения установлена на 100vh, что заполняет всю страницу.Когда я изменяю размер браузера до меньшей ширины, фоновое изображение обрезается.Изменение высоты на «100%» исправляет это, когда страница отзывчива, НО 100% показывает обрезанное изображение, когда я возвращаюсь к обычному размеру рабочего стола, потому что оно заполняет только фон размером div.
I 'м, используя 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",
},
Iпопытался добавить это в мой класс стилей контента, но это не имело значения
[theme.breakpoints.down('lg')]: {
height: '100%'
}
Есть предложения?Спасибо