嵌套弹性框中的光滑滑块相同高度的图像答案

【问题标题】：Slick slider same height images within nested flexbox嵌套弹性框中的光滑滑块相同高度的图像
【发布时间】：2018-02-27 14:55:44
【问题描述】：

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

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

还有 CSS

                            html, body {
                            margin: 0;
                            }
                            .homepage-top .wrapper {
                                position: relative;
                            }
                            .homepage-top .wrapper:after {
                                padding-top: 50%;
                                display: block;
                                content: ' ';
                            }
                            .homepage-top .flex-container {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                right: 0;
                                left: 0;
                                padding: 5px;
                                display: flex;
                                -webkit-flex-wrap: wrap;
                                flex-wrap: wrap;
                            }
                            .homepage-top .flex-container>div {
                                height: 100%;
                                display: flex;
                                flex-direction: column;
                            }
                            .homepage-top .flex-container>div>div {
                                margin: 5px;
                                display: flex;
                            }
                            .homepage-grid-left-col {
                                width: 50.5%;
                            }
                            /*Slider styling */
                            .homepage-grid-left-col .homepage-grid-left-row {
                                width: 98.5%;
                            }
                            .homepage-grid-left-slider {
                                height: 100%;
                                display: flex;
                                overflow: hidden;
                            }

                            .slick-slide .slide1 {
                                background-image: url("http://p-hold.com/585/540");
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: center;
                                padding-top: 78.5%;
                            }
                            .slick-slide .slide2 {
                                background-image: url("http://p-hold.com/585/540");
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: center;
                                padding-top: 72.5%;
                            }
                            .slick-slide .slide3 {
                                background-image: url("http://p-hold.com/585/540");
                                background-repeat: no-repeat;
                                background-size: cover;
                                background-position: center;
                                padding-top: 78.5%;
                            }
                            .slick-slide .grid-title h2 {
                                font-size: 1.5em;
                                color: #fff;
                                text-shadow: 2px 2px #000;
                            }
                            .slick-slide .grid-title {
                                padding: 2% 3% 7% 3%;
                                background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(15%, rgba(0, 0, 0, 0.40)), color-stop(100%, rgba(0, 0, 0, 0.75)));
                                background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%);
                                background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.75) 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
                            }
                            .slick-dots li button {
                                border: 3px solid #fff;
                                border-radius: 50%;
                            }
                            .slick-dots li button::before {
                                color: transparent;
                                background: transparent;
                            }
                            .slick-dots li button:focus::before {
                                opacity: 0;
                                color: transparent;
                                background: transparent;
                                border-radius: 50%;
                            }
                            .slick-dots li button:hover::before, .slick-dots li.slick-active button::before {
                                opacity: 1;
                                color: #fff;
                                background: #fff;
                                border-radius: 50%;
                            }
                            .slick-dots {
                                bottom: 55px;
                            }
                            .slick-prev, .slick-next {
                                color: #fff;
                            }
                            .slick-prev {
                                left: 10px;
                                z-index: 10;
                            }
                            .slick-next {
                                right: 10px;
                                z-index: 10;
                            }
                            .homepage-grid-right-col {
                                width: 49.5%;
                            }
                            .homepage-grid-right-col .homepage-grid-top-right {
                                height: 50%;
                                background: #ddd;
                                background-image: url("http://p-hold.com/585/265");
                                background-size: cover;
                                background-position: center;
                            }
                            .homepage-grid-right-col .homepage-grid-bottom-right {
                                height: 50%;
                            }
                            .homepage-grid-bottom-right-inner, .grid-right {
                                flex: 1;
                                display: flex;
                            }
                            .homepage-grid-bottom-right-inner .grid-left {
                                width: 50%;
                                margin-right: 5px;
                                background-image: url("http://p-hold.com/280/270");
                                background-size: cover;
                                background-position: center;
                            }
                            .homepage-grid-bottom-right-inner .grid-right {
                                width: 50%;
                                background: #ddd;
                                margin-left: 5px;
                                background-image: url("http://p-hold.com/280/270");
                                background-size: cover;
                                background-position: center;
                            }
                            .homepage-grid-top-right .grid-title {
                                height: 45%;
                                width: 100%;
                                padding: 10px 20px;
                                display: inline-block;
                                background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(10%, rgba(0, 0, 0, 0.40)), color-stop(100%, rgba(0, 0, 0, 0.75)));
                                background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%);
                                background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.40) 10%, rgba(0, 0, 0, 0.75) 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
                            }
                            .homepage-grid-bottom-right .grid-right .grid-title {
                                height: 45%;
                                width: 100%;
                                padding: 10px 20px;
                                display: inline-block;
                                background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(5%, rgba(0, 0, 0, 0.40)), color-stop(100%, rgba(0, 0, 0, 0.75)));
                                background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%);
                                background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.40) 5%, rgba(0, 0, 0, 0.75) 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
                            }
                            .homepage-grid-top-right .grid-title, .homepage-grid-bottom-right .grid-right .grid-title {
                                align-self: flex-end;
                            }
                            .homepage-grid-left-col .grid-title h2, .homepage-grid-top-right .grid-title h2, .homepage-grid-bottom-right-inner .grid-right .grid-title h2 {
                                font-size: 1.5em;
                                color: #fff;
                                text-shadow: 2px 2px #000;
                            }
                            @media (max-width: 1200px) {
                                .homepage-grid-top-right .grid-title {
                                    height: 55%;
                                }
                                .homepage-grid-bottom-right .grid-right .grid-title {
                                    height: 70%;
                                }
                            }
                            @media (max-width: 992px) {
                                .homepage-grid-left-col {
                                    width: 98.5%;
                                }
                                .homepage-grid-right-col {
                                    width: 100%;
                                }
                                .homepage-top .wrapper:after {
                                    padding-top: 100%;
                                    display: block;
                                    content: ' ';
                                    margin-bottom: 99%;
                                }
                                .homepage-grid-right-col .homepage-grid-top-right {
                                    height: 70%;
                                }
                                .homepage-grid-right-col .homepage-grid-bottom-right {
                                    height: 70%;
                                }
                                .homepage-grid-top-right .grid-title, .homepage-grid-bottom-right .grid-right .grid-title {
                                    height: 40%;
                                }
                            }
                            @media (max-width: 768px) {
                                .homepage-grid-top-right .grid-title, .homepage-grid-bottom-right .grid-right .grid-title {
                                    height: 95%;
                                }
                            }

我想在滑块中实现相同的效果，同时将背景图像元素保持为固定宽度。但是我发现元素的大小会根据覆盖的长度而改变。

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

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

【问题讨论】：

标签： javascript html css flexbox slick.js

【解决方案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>

【讨论】：

我的错误（已更正）的不同填充。正如您所看到的，当填充值设置为相同的值时，这仍然会发生。你的笔似乎没有正确渲染
我现在已经尝试了您的解决方案。图像高度问题是 fixex 但是给滑块容器绝对边距会导致标题相互重叠（我之前在开发此布局时遇到过）如果您可以推荐解决此问题的方法，我将接受此答案。在此处更新笔codepen.io/nivims/pen/MQZWjy
@nivims 您忘记在绝对元素的父级中添加position: relative;。我用 1 次编辑分叉了你的笔，检查 CSS 的底部。 codepen.io/joostm020/pen/qxLaYz