Как сохранить возможность автоматического изменения размера компонентов при создании шаблонов в React JS?

Question

Итак, я пытаюсь поместить фоновое изображение, а затем центрировать текст по нему, но когда я изменяю размер экрана, текст смещается и перемещается вверх. Вот мой код:

import React from "react";
import UniversalValues from "../constants.js";
export default function Body() {
  return (
    <div>
      <div className="Container">
        <img
          className="ResizeImage"
          src="https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
          alt="Background not loading! X_X"
        />
        <div className="TextField">
          <h1 className="BGH1">WE DO IT TOGETHER</h1>
          <h1 className="BGH1">SO LET'S CREATE</h1>
        </div>
      </div>
    </div>
  );
}

Вот мой css файл:

.App {
  font-family: sans-serif;
  text-align: center;
}
.BGH1 {
  letter-spacing: 0.06em;
  font-family: "Cinzel", serif;
  font-size: 5rem;
  position: relative;
}
.BrandPoint {
  font-size: 3rem;
  font-family: "Cinzel", serif;
  padding-left: 3rem;
}
.Container {
  position: relative;
}

.dropbtn {
  background: transparent;
  color: white;
  padding-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #33393f;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  transition: transform 0.5s ease;
  transform: scale(0.9);
  color: #3eccb5;
  border: 1px solid;
  border-radius: 0.2rem;
  border-color: #e0dede;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  transition: transform 0.5s ease;
  transform: scale(0.9);
  color: #3eccb5;
  border: 1px solid;
  border-radius: 0.2rem;
  border-color: #e0dede;
}

.HeaderElem {
  color: white;
  padding-bottom: 10px;
  font-size: 1.2rem;
}
.HeaderElem:hover {
  transition: transform 0.5s ease;
  transform: scale(0.9);
  color: #3eccb5;
  border: 1px solid;
  border-radius: 0.2rem;
  border-color: #e0dede;
}
.HeaderSeperator {
  padding-left: 2rem;
}
.HeadUp {
  position: fixed;
  top: 0;
  left: 0;
}

.ResizeImage {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0.99;
}

.TextField {
  position: absolute;
  bottom: 40%;
  left: 35%;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

То, что я получаю, и то, что я хотел:

Я хочу собрать все это вместе, чтобы оно могло эффективно менять свою форму в соответствии с размером экрана. Я использовал Bootstrap, но я новичок в React и полностью разрабатываю свой веб-сайт на codeandbox.io. Дай мне знать, как это лучше всего сделать.

Заранее спасибо.

Answer 1

Я думаю, ваша проблема заключается исключительно в HTML / CSS, а не в React. Спасибо за центрирование содержимого flexbox сегодня стало намного проще.

Измените свой HTML вот так:

<div>
  <div class="Container">
    <div class="imageContainer"></div>
    <div class="TextField">
      <h1 class="BGH1">WE DO IT TOGETHER</h1>
      <h1 class="BGH1">SO LET'S CREATE</h1>
    </div>
  </div>
</div>

И ваш CSS вот так:

.Container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:blue;
  position: relative;
  color: white;
  text-align: center;
  height: 300px;
}

.imageContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-image: url("https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
  background-position: center center;
}

Вот тест на скрипке: https://jsfiddle.net/gtqna9c1/7/

Как это работает

Вместо того, чтобы пытаться центрировать изменение текста путем абсолютного позиционирования, это Намного проще создать условия, при которых текст всегда будет по центру, несмотря ни на что. Фоновое изображение теперь является простым фоном блока div, который покрывает всю вашу коробку.

Скрипка упрощена и окрашена для ясности. Не стесняйтесь добавлять отступы и т. Д. c. как вы wi sh.