html - 如何使图像和容器具有相同的高度

Question

我无法让两个 inline-block 部分(#sec2BlockA 和 #sec2BlockB)与高度对齐。我希望这两个部分始终具有相同的高度。现在图像太短，出于某种原因 object-fit:cover 没有扩展图像以覆盖整个区域。

然后 .bottomArrowButton 与右侧文本重叠。

根据视口(viewport)和文本数量，我希望所有部分都配对，如下面的两张图片:

我不确定我在这个阵型上做错了什么。有没有人看到我能做什么。

#sec2 {
  width: 100%;
  height: auto;
}

#sec2BlockA,
#sec2BlockB {
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

#sec2BlockA {
  width: 40%;
  height: 100%;
  overflow: hidden;
}

#sec2BlockA img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

#sec2BlockB {
  width: 60%;
  height: 100%;
  position: relative;
}

#sec2BlockBWrap {
  height: auto;
}

.bottomArrowButton {
  width: 100%;
  height: 100px;
  bottom: 0;
  display: block;
  background: #EDEDED;
  position: absolute;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.bottomArrowButton:hover {
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  background: #000;
}

.bottomArrowButton:hover .moreEventsLink {
  color: #FFF;
}

.bottomArrowButton:hover .rightArrow {
  background-size: 15px 15px;
  background-repeat: none;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transform: translateX(15px);
  -webkit-transform: translateX(15px);
}

.moreEventsLink {
  display: inline-block;
  vertical-align: middle;
  color: #58595b;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-family: 'Nunito', sans-serif;
}

<section id="sec2">
  <div id="sec2BlockA">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/engineer.jpg" alt="Testing">
  </div>
  <div id="sec2BlockB">
    <div class="sec80" id="Sec2BlockBWrap">
      <h2 class="blockTG">Testing</h2>
      <div class="clear"></div>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <a href="solutions.php">
      <div class="bottomArrowButton">
        <div class="total-center">
          <span class="moreEventsLink">BUTTON</span>
        </div>
      </div>
    </a>
  </div>
</section>

Answer 1

解决方案一

问题在于，在 CSS height: 100% 中，如果它的父级设置了高度，则它会起作用。

在您的情况下，您有 height: auto，这就是为什么正确的元素具有较低的高度。

如果您将高度从 auto 更改为例如 500px，它会正常工作。

方案二

你也可以像这里一样改变相对元素:

#sec2 {
  width: 100%;
  height: auto;
  position: relative;
}

#sec2BlockA,
#sec2BlockB {
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

#sec2BlockA {
  width: 40%;
  height: 100%;
  overflow: hidden;
}

#sec2BlockA img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

#sec2BlockB {
  width: 59%;
  height: 100%;
}

#sec2BlockBWrap {
  height: auto;
}

.bottomArrowButton {
  width: 60%;
  height: 100px;
  bottom: 0;
  display: block;
  background: #EDEDED;
  position: absolute;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.bottomArrowButton:hover {
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  background: #000;
}

.bottomArrowButton:hover .moreEventsLink {
  color: #FFF;
}

.bottomArrowButton:hover .rightArrow {
  background-size: 15px 15px;
  background-repeat: none;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
  transform: translateX(15px);
  -webkit-transform: translateX(15px);
}

.moreEventsLink {
  display: inline-block;
  vertical-align: middle;
  color: #58595b;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-family: 'Nunito', sans-serif;
}

<section id="sec2">
  <div id="sec2BlockA">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/engineer.jpg" alt="Testing">
  </div>
  <div id="sec2BlockB">
    <div class="sec80" id="Sec2BlockBWrap">
      <h2 class="blockTG">Testing</h2>
      <div class="clear"></div>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      <p class="dG">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <a href="solutions.php">
      <div class="bottomArrowButton">
        <div class="total-center">
          <span class="moreEventsLink">BUTTON</span>
        </div>
      </div>
    </a>
  </div>
</section>