使用引导水平堆叠全尺寸背景图像

Question

我需要在 React 中使用引导程序在背景中堆叠 3 个完全大小的背景图像。这些图像很不稳定，尺寸很奇怪，它们之间有空白。

我尝试弄乱图像尺寸，但它不会响应。

<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，这很好，你可以混合两者。

灵活调整属性以使其工作：

.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>