如何让图像和容器具有相同的高度

Question

我遇到两个inline-block部分（#sec2BlockA和#sec2BlockB）与高度对齐时遇到了麻烦。我希望这两个部分始终保持相同的高度。目前图像太短，由于某种原因，object-fit:cover没有扩展图像以覆盖整个区域。

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

取决于视口和文本数量，我希望所有部分配对，如下面的两个图像：

我不确定这个阵型我做错了什么。有谁看到我能做什么。

#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

问题重叠是因为bottomArrowButton的绝对位置，绝对定位会将其从流中移除。

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

对于解决方案，我将使用flex：

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

Answer 2

解决方案1 ​​

问题是在CSS height: 100%中，如果它的父级具有高度设置，则可以正常工作。

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

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

解决方案2

您也可以像这里一样更改相关元素：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

对象拟合仅在定义了两个维度时才有效。如果您的正确内容总是更高，那么您绝对可以放置左侧div，以便height:100%对图像起作用：

＆＃13;

＆＃13;

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

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

#sec2BlockA {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
}

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

#sec2BlockB {
  width: 60%;
  position: relative;
  left:40%;
}

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;