Is there a way to fix an image 's position inside a div without background?

Question

I'm currently integrating an article's view in a ruby on rails environment. I wanted to create a 450px height div set the article's image inside it and fix so it would look like this

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

and the css would look like this

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

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

Obviously, it worked until I set the position to fixed, where it got fixed for the viewport and not the div.

Is there a way to fix it in a way or an other, without using background-image directly in the html to get the image fixed?

EDIT

I created a codepen so you guys can understand what I'm talking about, sorry for the time it took:

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

Thank you in advance

Answer 1

Okay I have a solution where I nest divs to achieve the same effect:

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

It solves it, although I would still say getting it to work with background-position: fixed would be a nicer solution.

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