Как получить изображения и контейнер, чтобы иметь одинаковую высоту

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

Раствор 1

Проблема в том, что в CSS height: 100% работает, если для его родителя установлена ​​высота.

В вашем случае у вас есть height: auto, поэтому правый элемент имеет меньшую высоту.

Если вы измените высоту с auto на, например, 500px, она будет работать правильно.

Решение 2

Вы также можете изменить относительный элемент, как здесь:

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

Answer 2

Подгонка объекта работает, только если определены оба измерения. Если ваш правый контент всегда будет выше, вы можете расположить свой левый div так, чтобы на изображении работал height:100%:

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

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

Проблема перекрывается из-за абсолютной позиции 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;
}