在2 divs之间放置图像（集中在屏幕上，响应并且不在文本中）

问题描述：

我试图在我的页面上的2个div之间放置图像。目前我已经能够在两个div之间获得的图像，但它不响应（仅在1920宽度正确的位置），并且两者重叠的div的文字：在2 divs之间放置图像（集中在屏幕上，响应并且不在文本中）

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

是否有可能实现我所追求的目标？在此先感谢。

给予填充到您的文本。 –

我在你给的标记中看不到两个div。 div围绕img的目的是什么？其他div的CSS在哪里？ “回应”是什么意思？在大多数情况下，人们真正的意思是“适应性”，但这些元素应该做什么和什么时候做什么？ – Rob

答

首先，您必须将相同数量的padding-bottom添加到上面的DIV，并将padding-top添加到随后的DIV，以便为图像创建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设置应该是从原来的宽/高比例，设置了90％的宽度获得的calc超值，喜欢height: calc(9/16 * 90%);如果比例为16/9

使它响应，使用相对位置。 –

@DhavalJardosh否 - 那么你会失去重叠/部分覆盖其他DIVs – Johannes

答

我把@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 divs之间放置图像（集中在屏幕上，响应并且不在文本中）

相关推荐