Есть ли способ исправить положение изображения внутри div без фона?

Question

В настоящее время я интегрирую представление статьи в рубине на окружении рельсов. Я хотел создать 450px высоту 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.

Есть ли способ исправить это так или иначе, не используя background-image непосредственно в html, чтобы получить изображение исправлено?

EDIT

Я создал codepen, чтобы вы, ребята, можете понять, что я говорю, извините за время, которое потребовалось:

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

Спасибо заранее

Answer 1

У меня есть решение, где я гнездо div с для достижения такого же эффекта:

.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