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>

what I am trying to achieve

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

Answer 1

首先，您需要向上DIV添加相同数量的padding-bottom，并为后续DIV添加padding-top，以便为您的图像创建enogh空间。（试错找到合适的金额）

您的btwing DIV应该是后续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％宽度，如果比例为16，则为height: calc(9/16 * 90%); 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被视为推荐的第二个div的孩子

result at mobile resolutions

result at desktop resolutions

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

2 个答案: