在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

是否有可能實現我所追求的目標？在此先感謝。

來源

2017-07-24 Necro HD

給予填充到您的文本。 –

我在你給的標記中看不到兩個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

來源

2017-07-24 19:42:20 Johannes

使它響應，使用相對位置。 –

@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

來源

2017-07-24 21:32:37

在2 divs之間放置圖像（集中在屏幕上，響應並且不在文本中）

回答

相關問題