覆盖响应图像滑块底部的图像

Question

我试图将图像添加到响应式滑块的底部，需要帮助将其粘贴到底部。

在全屏模式下，它可以正常工作，但随着我缩小页面，它会不断浮动，越来越高。

我知道我可以设置媒体查询来修复某些断点上的问题，但我正在寻找一种更具适应性的解决方案，无需使用媒体查询即可使用。

这是滑块在全宽处看起来像的图像。 （这可以。）

然后，当我开始缩放屏幕时，您会注意到草图向上移动。

这是我的问题。我需要将草粘在滑块的底部。

我不想发布所有滑块代码，所以我在JSFiddle上制作了一个简单的版本。

这是代码。

HTML：

<div class="pic" align="center"><img src="http://i.imgur.com/8uVGUkM.jpg" class="slider"/></div>


<div class="grassframe"><img src="http://i.imgur.com/vw8soIm.png" class="img-max"/></div>

CSS：

.slider{width:100%; max-width:960px; height:auto;  position:relative; z-index:1;}

.grassframe {
    position:relative;
    max-width:1200px;
    margin:-135px auto;
    z-index:2;
    }
.img-max { width:100%; height:auto; }

如果有人不介意的话，我创建了JSFiddle。

Answer 1

您可以将absolute position和margin-top与%值一起使用。的 DEMO

使用％值的垂直填充或边距使用父宽度作为参考。因此，一旦调整，它将以任何宽度进行调整。

.slider {
    width:100%;
    max-width:960px;
    height:auto;
    position:relative;
    z-index:1;
    border:solid;
}
.grassframe {
    position:absolute;
    margin-top:-12.5%;
    max-width:1200px;
    left:0;
    right:0;
    z-index:2;
}
.img-max {
    width:100%;
    height:auto;
}

---

如果在相对位置使用包装并设置为相同的最大宽度，它甚至可以更好地工作（只要z-index是可用的，绝对或相对位置的草在这里并不重要） ： DEMO

.slider {
    width:100%;
    max-width:960px;
    height:auto;
    position:relative;
    z-index:1;
    border:solid;
}
.grassframe {
    position:relative;
     margin-top:-12%;
    max-width:1200px;
    left:0;
    right:0;
    z-index:2;
}
.img-max {
    width:100%;
    height:auto;
}
.container {
    position:relative;
    margin:auto;
    max-width:1200px;
}

Answer 2

试用以下代码：

<强> HTML

<div class="pic" align="center">
    <img src="http://i.imgur.com/8uVGUkM.jpg" class="slider" />
    <div class="grassframe"></div>
</div>

<强> CSS

.pic {
    position: relative;
}
.slider {
    max-width:100%;
}
.grassframe {
    background: url("http://i.imgur.com/vw8soIm.png") no-repeat scroll center top / 1920px auto rgba(0, 0, 0, 0);
    bottom: -87px;
    height: 310px;
    position: absolute;
    width: 100%;
}

查看JSFiddle