html - 将图像叠加在响应式图像 slider 的底部

Question

我正在尝试将图像添加到响应式 slider 的底部，并且需要帮助将其粘贴到底部。

在全屏模式下，它工作正常，但当我缩小页面时，它会不断向上 float ，越来越高。

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

这是 slider 全宽时的图像。 (这可以。)

然后，当我开始缩放屏幕时，您可以注意到草 map 像向上移动。

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

我不想发布所有 slider 代码，因此我在 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;
}