有没有办法在没有背景的 div 中修复图像的位置？

Question

我目前正在 rails 环境中的 ruby 中集成一篇文章的视图。我想创建一个 450 像素的高度 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 固定了。

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

编辑

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

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

提前致谢

Answer 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

有没有办法在没有背景的 div 中修复图像的位置？

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

html

css

ruby-on-rails

css-position

background-position