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

В настоящее время я интегрирую представление статьи в среде ruby ​​on rails. Я хотел создать div высотой 450px, установить в нем изображение статьи и исправить так, чтобы он выглядел так

<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 чтобы исправить изображение?

РЕДАКТИРОВАТЬ

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

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

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

1 ответ

Решение

Хорошо, у меня есть решение, где я гнездую divs для достижения того же эффекта:

.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

Другие вопросы по тегам