Question

我目前正在将一篇文章的视图集成到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来修复图像？

修改

我创建了一个codepen，这样你们就可以理解我正在谈论的内容，抱歉花了很长时间：

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

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

1 个答案: