CSS如何翻译图片，并使div调整到新的大小？

Question

我正在处理这个HTML CSS块，我需要图片稍微重叠标题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/

Answer 2

您可以始终“硬编码”图像的边距(可能不是最佳解决方案)：

  img {
width: 100%;
border: solid 1px black;
margin-left: 1em;
margin-bottom: -4em;}

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