Сделайте фоновое изображение подходящим для полноэкранного режима (не окна), а размер не изменится при сворачивании окна без использования px.

Я не нашел, как сделать фиксированное фоновое изображение при первом создании приложения для реагирования. Я объясню: когда я выполняю команды: npx create-react-app reactapp cd reactapp npm start

Я вижу приложение реакции по умолчанию, которое находится на локальном хосте 3000, и логотип реакции, который вращается. И когда я пытаюсь добавить фоновое изображение в html или body или app.js div, фоновое изображение уменьшается, когда я сворачиваю свое окно. Я пробовал высоту с % vh vw rem rm и до сих пор. У меня работал только px, но я не хочу использовать px, потому что он не помещается на весь экран. Так что, если кто-то, пожалуйста, может сказать мне, где я должен добавить фоновое изображение и исправить макет сайта (сделать так, чтобы содержимое в окне не сжималось при минимизации). Благодарю вас!

css: index.css

app.css часть 2 app.css часть 1


reactjs layout css background-image fixed
person Anonymous    schedule 20.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы правильно использовать % вместо px, вам нужно установить свойство position для фона. Вы можете попробовать установить position: relative; для элемента html, который содержит ваше фоновое изображение, а затем установить его width и height с помощью %. Я надеюсь, что это решит вашу проблему.

person Djerry    schedule 20.03.2020
comment
Я сказал, что пытался использовать %, но содержимое окна все равно уменьшалось, когда я сворачивал окно. - person Anonymous; 21.03.2020
comment
Итак, возможно, проблема в размерах изображений. Когда вы используете %, он соответствует 100% своей исходной ширины, которая не равна ширине вашего окна. Вот почему, когда вы используете px, он работает, потому что изменяет исходные размеры изображения. Может быть, вам нужно изменить размер изображения с помощью редактора и сделать его равным размеру окна? - person Djerry; 21.03.2020
comment
Если это не сработает, попробуйте использовать высоту с пикселями и ширину: unset; или попробуйте width: 100% !important; - person Djerry; 21.03.2020
comment
Вы все еще не понимаете. Когда я использую 100%, он помещается во все окно, но когда я сворачиваю свое окно, изображение также сворачивается вместе с ним. Я могу решить это с помощью px, но тогда это будет уместно не на каждом экране. Я хочу использовать динамическое изображение, размер которого изменяется по размеру экрана, а не по размеру окна. - person Anonymous; 21.03.2020
comment
Хорошо, тогда, может быть, вы можете попробовать поставить запросы @media для каждого размера экрана и использовать px для всех из них? - person Djerry; 21.03.2020
comment
Но должен быть общий способ сделать это без использования px. С медиа-запросами я все еще использую px. - person Anonymous; 21.03.2020
comment
Хм, тогда я не уверен, смогу ли я видеть по-другому. Вы пытались добавить фоновое изображение в элемент body вместо html? - person Djerry; 22.03.2020
comment
У меня пока больше нет идей. Извините :( - person Djerry; 22.03.2020
comment
единственное, что я могу предложить, это поискать в бутстрапе некоторые решения, которые могут помочь - person Djerry; 23.03.2020