배경이없는 div 안에 이미지의 위치를 ​​고정시키는 방법이 있습니까?

Question

저는 현재 레일즈 환경에서 루비의 기사보기를 통합하고 있습니다. 내가 그 안에 기사의 이미지를 설정하고이

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

과 같을 것이다 그렇게 해결 DIV 450 픽셀 높이를 만들고 싶었와 CSS를 분명히이

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

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

과 같을 것이다, 내가 때까지 일 위치를 고정으로 설정합니다. 여기서 뷰포트에 고정되고 div는 고정되지 않습니다.

이미지를 수정하려면 background-image을 html로 직접 사용하지 않고 방법을 고쳐 쓸 방법이 있습니까?

편집

내가 만든 너희들 무슨 말인지 이해할 수 있도록 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