html - CSS 如何向上翻译图像，并让 div 调整到新的大小？

Question

我正在处理这个 HTML CSS block ，我需要图像与标题 div(蓝色)稍微重叠。

我正在按照此处的 jsfiddle 所示执行此操作:https://jsfiddle.net/49zcmf4z/3/

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12 block-header">
      <div class="col-md-offset-6 col-md-6 text-center block-header">
        <h1>Title</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 image text-center">
        <img src="http://placehold.it/350x150">
      </div>
      <div class="col-md-6">
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
      </div>
    </div>
  </div>
</div>

和 CSS

body {
  margin: 10px;
}

.container {
  border: solid 1px red;
}

.image {
  position: relative;
  z-index: 10;
}
@media (min-width: 200px) {
  .image img {
    transform: translateY(-5em);
  }
}
.image img {
  width: 100%;
  border: solid 1px black;
  margin-left: 1em;
}

.block-header {
  background-color: blue;
  height: 85px;
  padding-left: 0px;
  padding-right: 0px;
}
@media (max-width: 992px) {
  .block-header {
    padding-top: 1px;
  }
}
.block-header h1 {
  color: white;
}

我的问题是，在向上翻译图像后，包含它的 div 保持不变，并且在图像原来所在的位置有很多空白。

Answer 1

嘿，你可以尝试使用边距而不是转换，这样更容易:

.image {
  position: relative;
  z-index: 10;
  @media (min-width: 200px) {
    img {
      margin-top: -5em;
    }
  }
  img {
    width: 100%;
    border: solid 1px black;
    margin-left: 1em;
  }
}

https://jsfiddle.net/49zcmf4z/4/