Question

我是使用flexbox的新手。我已经在flexbox网格的一个元素中部署了光滑的滑块。我正在使用底部对齐的渐变元素的背景图像跨越网格的不同元素。这是代码

me?fields=picture{height(100),width(100)}

和CSS

  <div class="wrapper">
        <div class="flex-container">
            <div class="homepage-grid-left-col">
                <div class="homepage-grid-left-row">
                    <div class="homepage-grid-left-slider">
                        <div class="slide1">
                            <div class="grid-title">
                                <h2>Lorem ipsum dolor amet raclette venmo hexagon beard, green juice brunch ethical pinterest salvia</h2><a class="btn btn-primary btn-sm" href="#">Read more</a>
                            </div>
                        </div>
                        <div class="slide2">
                            <div class="grid-title">
                                <h2>Selfies intelligentsia kale chips before they sold out XOXO put a bird on it craft</h2><a class="btn btn-primary btn-sm" href="#">Read more</a>
                            </div>
                        </div>
                        <div class="slide3">
                            <div class="grid-title">
                                <h2>Flexitarian freegan mumblecore kale chips dreamcatcher live-edge, squid microdosing selfies. Beard af la croix shaman</h2><a class="btn btn-primary btn-sm" href="#">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="homepage-grid-right-col">
                <div class="homepage-grid-top-right">
                    <div class="grid-title">
                        <h2>Ugh tousled fam microdosing<br>
                        Try-hard affogato</h2><a class="btn btn-primary btn-sm" href="#">Find out more</a>
                    </div>
                </div>
                <div class="homepage-grid-bottom-right">
                    <div class="homepage-grid-bottom-right-inner">
                        <div class="grid-left"></div>
                        <div class="grid-right">
                            <div class="grid-title">
                                <h2>Pabst iPhone truffaut</h2><a class="btn btn-primary btn-small" href="#">Find out more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我想在滑块内实现相同的效果，同时将背景图像元素保持为固定宽度。但是我发现元素的大小取决于叠加的长度。

问题在下面的codepen中复制：第一个和第二个幻灯片背景高度根据叠加层的长度而变化。

https://codepen.io/nivims/full/MQzBdE/

Answer 1

滑块项目的高度不同有几个原因。

您使用了padding-top来创建宽高比高度，但是您为滑块项设置了不同的百分比，这对于所有人都应该相等。
滑块内容会影响div的高度，为了防止这种情况，您应该将其置于滑块元素中的绝对位置。

我为你创建了这支笔，这可能有助于你理解：

https://codepen.io/joostm020/pen/WMYmZv

html,body {
  font-family: Arial;
  font-size: 1vw;
}

.slider {
  width: 100%;
  display: inline-flex;
}
.slide {
  position: relative;
  width: 33.33%;
  padding-bottom: 20%;
  margin: 5px;
  background-color: grey;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; /* Try cover for no ugly borders! */
}
.slide .slide-content {
  position: absolute;
  bottom: 0;
  width: 100%;
}

#slide1 { background-image: url(http://placehold.it/400x300); }
#slide2 { background-image: url(http://placehold.it/500x200); }
#slide3 { background-image: url(http://placehold.it/740x1000); }

<div class="slider">
  <div class="slide" id="slide1">
    <div class="slide-content">
      <h1>Lorem ipsum!</h1>
      <p>Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis, quis luctus felis viverra. Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis.</p>
    </div>
  </div>
  <div class="slide" id="slide2">
    <div class="slide-content">
      <h1>Lorem ipsum!</h1>
      <p>Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis, quis luctus felis viverra.</p>
    </div>
  </div>
  <div class="slide" id="slide3">
    <div class="slide-content">
      <h1>Lorem ipsum!</h1>
      <p>Donec blandit ullamcorper libero non fermentum.</p>
    </div>
  </div>
</div>

在嵌套的flexbox中滑动滑块相同高度的图像

1 个答案: