有沒有辦法在沒有背景的情況下修復圖片在div中的位置？

我目前正在將軌道環境中的文章視圖集成到ruby中。我想創建一個450像素高度的div設置文章的圖像裏面和修復，因此看起來像這樣有沒有辦法在沒有背景的情況下修復圖片在div中的位置？

<div class="image_container> 
    <img src="/path/to/image.jpg" /> <!-- or <%= image_tag @article.image %> --> 
</div>

和CSS是這樣的

.image_container{ 
    position: relative; 
    height: 450px; 
    overflow-y: hidden 
} 

.image_contianer img{ 
height: 100% 
position: fixed; 
}

很明顯，它的工作，直到我將位置設置爲固定位置，固定位置爲視口而不是div。

有沒有辦法以某種方式修復它，而不是直接在html中使用background-image來修復圖像？

編輯

我創建了一個codepen所以你們能明白我在說什麼，對不起，它花了時間：

http://codepen.io/Drillan767/pen/rrKgyA

預先感謝您

來源

2016-10-13 Jaeger

'position：absolute' ... not fixed ... that do it it。 –

試過了，它沒有工作，圖像仍然沿着滾動 – Jaeger

所以你想讓圖像保持靜止？這不正是「固定」的東西嗎？ – ollpu

好吧我有一個解決方案，我嵌套div s實現相同的效果：

.image-container { 
    position: relative; 
    height: 400px; 
    overflow-y: hidden; 
} 

.image-container img { 
    position: absolute; 
    height: 100%; 
} 

.image-container-holder { 
    position: relative; 
    height: 100%; 
    overflow-y: scroll; 
} 
.my-child { 
    height: 40rem; 
    background: rgba(0, 0, 255, .5); 
    margin-top: 20rem; 
    margin-left: 5rem; 
}

<div class="image-container"> 
    <img src="https://placekitten.com/g/1450/500"> 
    <div class="image-container-holder"> 
    <div class="my-child"> 
     Here 
    </div> 
    </div> 
</div>

它解決它，但我還是要說得到它與background-position: fixed工作將是一個更好的解決方案。

http://codepen.io/anon/pen/kkpKxY

來源

2016-10-13 17:39:51 MMachinegun

我對你的解決方案進行了調整，在設置了'overflow-y：hidden'後，我對結果非常滿意，謝謝！ – Jaeger

有沒有辦法在沒有背景的情況下修復圖片在div中的位置？

回答

相關問題