javascript - 在图像上覆盖 div,不知道图像/容器 div 的高度
问题描述
我正在使用引导程序 v4。我有一个图像,我希望它拉伸(保持其纵横比)到页面的整个宽度,这意味着图像/图像容器的高度可以改变。我还想要图像顶部和底部的 div。
Bootstrap有 row align-items-start
并且row align-items-end
我曾经试图让我的 div 去我想要的地方,但它似乎没有用。
由于图像/容器 div 的大小调整,我不确定是否可以像我想要的那样覆盖元素。可能我需要为此使用javascript。
HTML
<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>
CSS
.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;
}
解决方案
.outer {
position: relative;
}
.redbox {
background: rgba(255, 0, 0, 1);
height: 20px;
}
.bluebox {
background: rgba(0, 0, 255, 1);
height: 20px;
}
#topBox, #bottomBox {
position:absolute;
left:0
}
.img-fluid {
width:100%;
display: block;
}
#topBox {
top:0
}
#bottomBox {
bottom:0
}
<div class="outer container-fluid">
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100" />
<div id="topBox" class="row align-items-start">
<div class="col-1 redbox">Top</div>
</div>
<div id="bottomBox" class="row align-items-end">
<div class="col-1 bluebox">Bottom</div>
</div>
</div>
推荐阅读
- algorithm - 如何推导出大 O 符号?
- python - Pycharm 后端问题
- android - 将时间(录制时)显示为 Android 视频录制上的叠加层
- qt - 如何获取 qml 中任何文件夹中的文件?
- typescript - 我无法在 Vue3.js 项目的 main.ts(TypeScript) 中导入一些库
- python - 如果一列包含另一个值,我将如何组合两个熊猫数据框
- python - 不平衡学习中的嵌套管道
- laravel - 在 laravel 和 vue 中推送“事件通道上没有回调”
- java - Eclipse 在创建新项目时只建议我 Webapp 文件夹,而不是 webContent 文件夹
- django - 将域指向 vps 时收到错误请求