Existe-t-il un moyen de corriger la position d'une image dans un div sans arrière-plan?

Question

J'intègre actuellement la vue d'un article dans un environnement ruby ​​on rails. Je voulais créer une 450px de hauteur div définir l'image de l'article à l'intérieur et le fixer serait donc ressembler à ceci

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

et le css ressemblerait à ceci

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

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

De toute évidence, cela a fonctionné jusqu'à ce que je positionner la position à fixed, où elle est fixée pour la viewport et non la div.

Y at-il un moyen de le réparer d'une manière ou d'une autre, sans utiliser background-image directement dans le code HTML pour obtenir l'image corrigée?

EDIT

J'ai créé un gars codepen pour que vous puissiez comprendre ce dont je parle, désolé pour le temps qu'il a fallu:

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

Nous vous remercions à l'avance

Answer 1

Ok, j'ai une solution où je niche div s pour obtenir le même effet:

.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> 

Il résout, bien que je dirais encore le faire fonctionner avec background-position: fixed serait une solution plus agréable.

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