并排响应图像和文本

Question

我正在尝试制作 2 列：

第一个是占页面 50% 的图像，另一个是占页面剩余 50% 的文本框。没有边距。

有没有可能有这样的响应？我正在努力让背景颜色与图像对齐。

 .imagebox {
  width: 50%;
  float: left;
}

.textbox {
  width: 50%;
  float: right;
  text-align: center;
  padding-top: 20px;
  background-color: #666;
  color: #fff;
}

<div class="imagebox">
<img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" />

</div>

<div class="textbox">

  <h2>Title Here</h2>
  <p>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.</p>
  <a href="#">Read More</a>

</div>

原文由 Jade 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下答案是响应式的，但在宽度较小的情况下，图像会非常窄并且可能被裁剪得太多。在某个断点处，您可能希望将并排布局转换为堆叠的单列布局。

 .wrap {
  display: flex;
}

.wrap>* {
  flex: 1;
}

.imagebox {
  position: relative;
}

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

.textbox {
  padding: 1rem;
  background-color: #666;
  color: #fff;
}

 <div class="wrap">
  <div class="imagebox">
    <img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" />
  </div>

  <div class="textbox">
    <h2>Title Here</h2>
    <p>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.</p>
    <a href="#">Read More</a>
  </div>
</div>

原文由 Cornelius 发布，翻译遵循 CC BY-SA 4.0 许可协议