有没有办法在没有背景的 div 中修复 image 的位置？答案

【问题标题】：Is there a way to fix an image 's position inside a div without background?有没有办法在没有背景的 div 中修复 image 的位置？
【发布时间】：2016-10-13 15:29:25
【问题描述】：

我目前正在 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;
}

显然，它一直有效，直到我将位置设置为固定，它为视口而不是 div 固定。

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

编辑

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

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

提前谢谢你

【问题讨论】：

position:absolute ...未修复...应该这样做。
试过了，不行，图片还是跟着滚动的
所以您希望图像保持静止？这不正是fixed 所做的吗？
我很困惑，你想让图像跟着你滚动吗？还是您只是希望它位于容器内？
能不能装个钢笔或小提琴，快速上手比较方便

标签： html css ruby-on-rails css-position background-position

【解决方案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

【讨论】：

我根据我的问题调整了你的解决方案，设置了一些overflow-y: hidden后我对结果非常满意，谢谢！