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

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

1 个答案: