html - 是否可以让图像溢出 div，而不调整 div 的大小？

Question

背景

我正在使用 Bootstrap 4 创建布局。

这是一张图片，大致显示了我想要完成的任务:

粗略地说，这是这样构建的:

<div class="row">
    <div class="col-12 col-md-3">
        <img src="..." style="width:100%; max-width: 400px;" />
    </div>
    <div class="col-12 col-md-6">
        TITLE
    </div>
</div>

<div class="row">
    <div class="col-12 col-md-6 offset-md-3">
        CONTENT
    </div>
</div>

因为我使用 BS4，所以我有一个响应式布局，这样所有这些元素都可以堆叠在较小的设备上，同时在中型和大型设备上保持图示布局。

我的问题

图像的大小是合理的，但它将 L2 线(如图所示)向下推，除非我使用 max-width 将图像保持得非常小。 css 属性。

我的目标

我想要的是在不改变 <div class="row"> 的高度的情况下 将图像放大一点包含它。即，不将 L2 向下推。

换句话说，我希望图像能够溢出其容器。

这可能吗？

我尝试过的

我查看了各种 overflow-y css 属性，但它们都没有实现这一点。

如有任何帮助，我们将不胜感激。

目标

Answer 1

您可以随时使用 z-index!只需将第一行位置设置为“相对”，然后应用适当的 z-index。在此之后，只需为您的图像容器设置一个比包含的 div 长的高度。

我在这里创建了一个简单的工作示例:https://jsfiddle.net/cf8z06ya/

.firstRow {
  width: 100%;
  background-color: red;
  height: 50px;
  position: relative;
  z-index: 1;
}

.secondRow {
  width: 100%;
  background-color: yellow;
  height: 50px;
}

.overrun {
  width: 50px;
  height: 100px;
  background-color: black;
}

希望这对您有所帮助!