html - 有没有办法在没有背景的情况下修复图像在 div 中的位置？

Question

我目前正在将一篇文章的 View 集成到 ruby​​ on rails 环境中。我想创建一个 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;
}

很明显，它一直有效，直到我将位置设置为固定，它针对视口(viewport)而不是 div 固定。

有没有办法以某种方式修复它，而不是直接在 html 中使用 background-image 来修复图像？

编辑

我创建了一个代码笔，这样你们就可以理解我在说什么，很抱歉花了这么长时间:

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