根据第一个 div 的高度隐藏第二个 div 的溢出（响应式）

Question

也许我忽略了一些我不知道的东西，呵呵。但重点是我有两列并排。一，左边，应该是列换行高度的主人，右边，其中包含一个img，不应该计算换行高度的高度......我不能使用固定高度，即使使用Jquery或者如果用户将浏览器窗口拖得更小，布局应该会发生变化。谢谢！

所以我的代码是这样的

<div class="column_wrap">
 <div class="column">
  Some text
 </div>
 <div class="column">
  IMG
 </div>
</div>

Example of what I want to achieve

Answer 1

如果图像不影响高度/宽度，则它需要是背景图像或绝对定位。

我假设在这种情况下两列的宽度相同，并且我使用了flexbox 来确保两列的高度也相同。

绝对位置

图像需要一个与第二列大小相同的附加包装器，如下所示：

* {
  box-sizing: border-box;
}
.column_wrap {
  display: flex;
  margin: 10px auto;
  bordeR: 1px solid grey;
}
.column {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}
.imgwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.imgwrap img {
  max-width: 100%;
}

<div class="column_wrap">
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
  </div>
  <div class="column">
    <div class="imgwrap">
      <img src="http://lorempixel.com/output/fashion-q-c-640-480-8.jpg" alt="" />
    </div>
  </div>
</div>

Codepen Demo

背景图片

* {
  box-sizing: border-box;
}

.column_wrap {
  display: flex;
  margin: 10px auto;
  bordeR:1px solid grey;
}

.column {
  flex:0 0 50%;
  position: relative;
  overflow: hidden;
}

.column:nth-child(2) {
  background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-8.jpg);
  background-size: cover;
}

<div class="column_wrap">
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita
    dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
  </div>
  <div class="column">
  </div>
</div>

Codepen Demo