html - 当我添加一些交叉淡入淡出图像时，Flexboxes 不会保持正确的高度

Question

我需要一些关于响应式 CSS( flexbox )和我需要仅使用 CSS 旋转的图像的帮助。

我创建了两支笔，这样您就可以看到我的问题了。

第一个类似于我希望最终产品的外观，以及我当前站点上运行的内容。 flexbox react 灵敏，大小调整正确，图片和背景图像/颜色在我想要的位置，文本垂直和水平居中。

https://codepen.io/hmhaley/pen/xMBvJo

这是按预期工作的 HTML(虽然我可能有额外的 div 层，但我不需要):

<div class="boxTable">
    <div class="boxBody">
        <div class="boxRow">

            <div class="boxCell firstBox">
                <div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg">
                </div>
            </div>
            <div class="boxCell secondBox">
                <div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
                    <div class="textFormat">EXPAND YOUR POSSIBILITIES
                    </div>
                </div>
            </div>
            <div class="boxCell thirdBox">
                <div class="boxText" style="color: #ffffff; background-color: #ffffff;">
                    <div class="textFormat" style="color: #999999">ACHIEVE A HIGHER LEVEL OF CONNECTION WITH OTHERS
                    </div>
                </div>
            </div>
            <div class="boxCell fourthBox"><img src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png">
            </div>

        </div>
    </div>
</div>

以及与上面的 HTML 一起工作的 CSS(尽管我可能有一些我不需要的额外类):

body {
    background-color: white;
}

.boxTable {
    display: table;
    width: 100%;
}

.boxBody {
    display: table-row-group;
}

.boxRow {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    min-height: 200px;
}

.boxCell {
    border: 0px solid #999999;
    padding: 0px 0px;
    width: 50%;
}

.boxCell img {
    width: 100%;
    height: auto;
    display: flex;
}

.boxText {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.textFormat {
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: bold;
    font-size: 2vw;
}

然后我的老板要求每张图片在计时器上交叉淡入淡出，以便两张不同的图片在每隔一个框中来回旋转。我让这个功能成功运行，但随后它弄乱了我的响应式 flexbox。我不知道如何一起做。我会使用 Javascript，并以这种方式尝试......但我们现在无法在我们的 CMS (Drupal) 中添加 javascript 脚本。因此，我需要仅使用 CSS/HTML 来实现这一点。

https://codepen.io/hmhaley/pen/WPmVyX

这是不起作用的 HTML(虽然淡入淡出有效，但盒子没有像以前那样排列/拉伸(stretch)/响应):

<div class="boxTable">
    <div class="boxBody">
        <div class="boxRow">

            <div class="boxCell firstBox">
                <div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg"><img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png"></div>
            </div>
            <div class="boxCell secondBox">
                <div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
                    <div class="textFormat">EXPAND YOUR POSSIBILITIES
                    </div>
                </div>
            </div>
            <div class="boxCell thirdBox">
                <div class="boxText" style="color: #ffffff; background-color: #ffffff;">
                    <div class="textFormat" style="color: #999999">BECOME CERTIFIED IN RECONNECTIVE HEALING®
                    </div>
                </div>
            </div>
            <div class="boxCell firstBox">
                <div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png"><img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg"></div>
            </div>

        </div>
    </div>
</div>

下面是与上面的 HTML 一起不起作用的匹配 CSS:

body {
    background-color: white;
}

.boxTable {
    display: table;
    width: 100%;
}

.boxBody {
    display: table-row-group;
}

.boxRow {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    min-height: 200px;
}

.boxCell {
    border: 0px solid #999999;
    padding: 0px 0px;
    width: 50%;
}

.boxCell img {
    width: 100%;
    height: auto;
    display: flex;
}

.boxText {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.textFormat {
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: bold;
    font-size: 2vw;
}

.boxImage {
    position: relative;
    margin: 0 auto;
}

.boxImage img {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
}

.boxImage > img.top {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}

@keyframes fade {
  0% {
  opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}

谁能帮我弄清楚要对 CSS 进行哪些更改才能使这些框保持其大小/高度和响应能力(如在第一个代码笔上)，但让图片淡入淡出(如在第二个代码笔上) )?

我只是一个初级编码员，在现实生活中更像是一名高级产品经理和运营人员，所以这几天一直困扰着我。我只是现在想不通，我需要放弃并寻求一点帮助。上面的笔只是我在一个相当复杂的单页“着陆页”上使用的代码示例，有很多不同的格式……但这是我正在努力处理的那个页面的部分……所以，为了获得一些帮助，我已经将其取出并在 codepen 中重新创建了它。这是我在 StackOverflow 上的第一篇文章，所以如果我没有正确发布这篇文章，请放轻松。 :-)

并且，提前感谢任何有时间查看此内容并提供一些建议的人。

Answer 1

我用过slick_slider做这个。我还附上了 slick-theme.min.css 、 slick.min.css 、 jquery-3.3.1.min.js 和 slick.min.js

希望对您有所帮助。

$(document).ready(function() {
    $('.boxImage').slick({
      dots: false,
      infinite: true,
      speed: 2000,
      autoplaySpeed:2000,
      fade: true,
      cssEase: 'linear',
      autoplay: true,
      arrows:false,
      pauseOnFocus:false,
      pauseOnHover:false
    });
});

body {
    background-color: white;
}

.boxTable {
	display: table;
	width: 100%;
}

.boxBody {
	display: table-row-group;
}

.boxRow {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	min-height: 200px;
}

.boxCell {
	border: 0px solid #999999;
	padding: 0px 0px;
	width: 50%;
}

.boxCell img {
	width: 100%;
	height: auto;
	display: flex;
  display: block !important;
}

.boxText {
	display: flex;
    justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.textFormat {
	margin: 0;
    padding: 0;
    text-align: center;
    font-weight: bold;
    font-size: 2vw;
}

.boxImage {
    position: relative;
    margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
 <div class="boxTable">
    <div class="boxBody">
      <div class="boxRow">
        
        <div class="boxCell firstBox">
          <div class="boxImage slide-one">
             <img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg">
            <img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png">
            
          </div>
        </div>
        <div class="boxCell">
          <div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
            <div class="textFormat">EXPAND YOUR POSSIBILITIES
            </div>
          </div>
        </div>
        <div class="boxCell thirdBox">
          <div class="boxText" style="color: #ffffff; background-color: #ffffff;">
            <div class="textFormat" style="color: #999999">BECOME CERTIFIED IN RECONNECTIVE HEALING®
            </div>
          </div>
        </div>
        <div class="boxCell firstBox">
          <div class="boxImage">
            <img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png">
            <img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg">
          </div>
        </div>
  
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>