将图像放置在 2 个 div 之间(以屏幕为中心，响应式而不是文本)

Question

我正在尝试在我的页面上的 2 个div 之间放置一个图像。 我目前能够在两个div 之间获取图像，但它没有响应(仅在 1920 宽度的正确位置(，并且它与两个div 的文本重叠：

截图来自我的网站

.css

.btwimg {
width: 90%;
height: auto;
position: absolute;
transform: translate3d(-20%, -50%, 0);
z-index: 1;
left: 50%;
background: url("../img/lara2.png");
background-repeat: no-repeat;
box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}

.html

<div class="btwimg">
<img src="img/lara2.png">
</div>

我正在努力实现的目标

有可能实现我所追求的吗？ 提前谢谢。

Answer 1

首先，您必须将相同数量的padding-bottom添加到上部 DIV 并padding-top添加到后续 DIV 中，以便为您的图像创建 enogh 空间。(反复试验以找到合适的金额(

您的btwingDIV 应该是后续 DIV 的子元素。那么这个CSS应该可以工作：

.btwimg {
width: 90%;
height: 250px /* Just a random guess - Needs a fixed height! */
position: absolute;
z-index: 1;
left: 50%;
top: -50%;
transform: translate(-50%, -50%);
background: url("../img/lara2.png");
background-repeat: no-repeat;
box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}

实际上，height设置应该是一个calc值，该值是从原始宽度/高度比例和您设置的90%宽度派生的，例如height: calc(9/16 * 90%);比例为16/9

Answer 2

我接受了@Johannes答案并稍微调整了一下以获得我想要的结果：

.btwimg {
max-width: 800px;
min-width: 300px;
height: 16vw;
position: absolute;
z-index: 1;
left: 50%;
top: calc(2vw  - 38px); /* keeps div roughly centred at all target resolutions */
transform: translate(-50%, -50%);
}

然后，我使用图像而不是背景来简化重新调整大小。

.btwimg img {
height: auto;
width: 100%;
}

BTWIMG被推荐为第二分区的孩子

移动分辨率下的结果

桌面分辨率下的结果