响应式图像底部的图标(始终位于引导列的底部)

Question

是否可以使这两个圆圈始终位于图像底部的左右？当我调整图像大小时，它们需要始终在图像的左下角，第二个在右下角。(它们应始终粘在图像的底角(如何这样定位它们？

enter code here

代码笔：https://codepen.io/anami90/pen/KeEqRw?editors=1100

Answer 1

根据您的问题，圆圈应该出现在外列上不是吗？ 希望这有帮助：

div {
height: 100vh;
}
.col-3 {
background: lightgreen;
}
.col-6 {
background: pink;
padding: 0;
display: flex;
align-items: center;
position: relative;
}
.circle-left {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
left: 0;
bottom: 0;
}
.circle-right {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
img { 
width: 100%;
height: auto;
vertical-align: middle;
}
<div class="row">
<div class="col-3">col-3</div>
<div class="circle-left"></div>
<div class="col-6">
<img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
</div>
<div class="col-3">col-3</div>
<div class="circle-right"></div>
</div>

https://codepen.io/anon/pen/zabLoq?editors=1100

Answer 2

我想将这 2 个圆圈定位为下图： 在此处输入图像描述