укладка полноразмерных фоновых изображений с помощью начальной загрузки по горизонтали?

Question

Мне нужно сложить 3 фоновых изображения в фоновом режиме с помощью начальной загрузки в React.Изображения шаткие, имеют странный размер и между ними пробелы.

Я пробовал возиться с размерами изображения, но он не будет отзывчивым.

<div className="container">
    <div style={{ backgroundImage: `url(${CityLife})`, backgroundSize: '100% auto', minHeight: '100%', minHeight: '1000px', backgroundRepeat: 'no-repeat' }}>
        Test2
    </div>
    <div  style={{ backgroundImage: `url(${GoodLife})`, backgroundSize: '100% auto', minHeight: '100%', minHeight: '1000px', backgroundRepeat: 'no-repeat' }}>
        Test2
    </div>
</div>

Было бы здоровоесли картинки располагаются в натуральную величину друг на друге во время ответа.

Answer 1

Flexbox отлично подходит для подобных вещей.

Вы упомянули, что вам нужно использовать Bootstrap, и это хорошо, вы можете смешать два.

Свойства Flex, чтобы заставить его работать:

.parent {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-wrap: wrap;
  flex-direction: row // or 'column' for inline
}

.img {
  width: 100vw;
  height: 100vh;
  padding: 5%;
}

.img-1,
.img-2,
.img-3 {
  /* you can inherit some of these properties with another css class */
  background: url(https://picsum.photos/1000/1000);
  display: block;
  padding: 4%;
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="parent">
  <div class="img img-1"> one </div>
  <div class="img img-2"> two </div>
  <div class="img img-3"> three </div>
</div>