Javascript 覆盖图像上的div，不知道图像/容器div的高度

我使用的是引导v4。 我有一个图像，我希望它拉伸，保持其纵横比为页面的全宽，这意味着图像/图像容器的高度可以改变。 我还希望在图像的顶部和底部有一个div

引导行对齐项开始和行对齐项结束，我曾经尝试让我的div去我想去的地方，但它似乎不起作用

由于图像/容器div的大小调整，我不确定是否可以像我想要的那样覆盖元素。可能我需要使用javascript来实现这一点

HTML

.外部{ 位置：相对位置； } 雷德博克斯先生{ 背景：rgba255,0,0,1； 高度：20px； } .蓝盒子{ 背景：rgba0,025,1； 高度：20px； } 顶箱，底箱{ 位置：绝对位置； 左：0 } .img液{ 宽度：100%； 显示：块； } 机顶盒{ 排名：0 } 底盒{ 底部：0 } 顶部 底部 .集装箱{ 宽度：100%； 位置：相对位置； 填充：0px； } .img液{ 宽度：100%； } .盒子{ 位置：绝对位置； 左：0px； 高度：20px； } .顶{ 顶部：0px； 背景：红色； } .底部{ 底部：5px； 背景：蓝色； } 顶部 底部

---

谢谢我的目标是使用引导类“align items start”，但是是的，这种方法也很有效。一个问题是，如果图像小于图像，则图像不适合页面宽度，我希望图像始终为页面宽度的100%。谢谢，我正在使用引导并尝试使用网格布局，这就是我使用行和列的原因。一个问题是，图像不适合页面宽度如果它小于图像，我希望图像始终为页面宽度的100%。如果页面很宽，图像会变大，但如果页面很窄，图像不会缩小。图像正在缩小。尝试在css中添加宽度为100%的类img流体。如果它现在仍然在工作，那么你能发送一些截图吗？它现在是什么样子，应该是什么样子？

<div class="outer container-fluid">
    <img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100">

    <div class="myboxes container-fluid">

        <div class="row align-items-start">
            <div class="col-1 redbox">Top</div>
        </div>
        <div class="row align-items-end">
            <div class="col-1 bluebox">Bottom</div>
        </div>

    </div>

</div>

.outer {
    position: relative;
}
.redbox {
    background: rgba(255, 0, 0, 1);
    height: 20px;
}
.bluebox {
    background: rgba(0, 0, 255, 1);
    height: 20px;
}
.myboxes {
    position: absolute;
    z-index: 2;
}
#cats {
    position: absolute;
    z-index:1;
}