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

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>

使用bootstrap水平堆叠完整的背景图像？

1 个答案: