使图像溢出其容器？

Question

我试图制作两个＆＃34;布局＆＃34 ;;一个图像适应其容器的宽度和图像溢出它的一个。后者是一个棘手的问题。我还没有能够提出一个简洁的解决方案。我尝试过flexbox和position：绝对让元素垂直对齐但是大部分时间它都会陷入混乱。我对结果并不满意。

如果可能，有些要求：

1）不使用position：absolute;

2）元素需要以某种方式垂直对齐中间

我想要实现的目标：

Answer 1

使用容器元素display: table和display: table-cell垂直居中两个div可以实现此问题的可能解决方案。然后，你只需要在左/右边给你的图像一个负边距，然后将容器设置为overflow: visible（或hidden，如你所愿。）

满足要求。

.container {
  width: 500px;
  height: 300px;
  border: 1px solid;
  display: table;
  margin-bottom: 10px;
  overflow: visible;
}
.cell {
  vertical-align: middle;
  display: table-cell;
}
.container .image,
.container .content {
  width: 250px;
  display: inline-block;
}
.container .image {
  background: url(https://unsplash.it/300);
  height: 150px;
}
.container .content {
  padding: 0 20px;
  box-sizing: border-box;
}
.col-right {
  float: right;
}
.col-left {
  float: left;
}
.container.hard .image {
  background: url(https://unsplash.it/400);
  height: 200px;
  width: 350px;
}
.container.hard .image.image-left {
  margin-left: -100px;
}
.container.hard .image.image-right {
  margin-right: -100px;
}

<h1>Easy Part</h1>
<div class="container">
  <div class="cell">
  	<div class="image"></div>
  </div>
  <div class="cell">
	  <div class="content col-right">
	    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
	  </div>
  </div>
</div>
<br>
<div class="container">
  <div class="cell">
	  <div class="content col-left">
	    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
	  </div>
  </div>
  <div class="cell">
  	<div class="image"></div>
  </div>
</div>

<h1>Hard Part</h1>
<div class="container hard">
  <div class="cell">
  	<div class="image image-left"></div>
  </div>
  <div class="cell">
	  <div class="content col-right">
	    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
	  </div>
  </div>
</div>
<br>
<div class="container hard">
  <div class="cell">
	  <div class="content col-left">
	    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
	  </div>
  </div>
  <div class="cell">
  	<div class="image image-right"></div>
  </div>
</div>