html - 如何在 bootstrap 4 中的响应图像内制作响应框？

Question

我正在尝试在 Bootstrap 4 中的响应图像内制作一个响应框，但问题是，当我将 100% 的 width 添加到框后它会在图像后延伸，如果我将 15px 的 right 属性添加到它不会拉伸(stretch)的图像，但是当我在 google chrome 浏览器中缩小到 33% 或更低时，框会从图像中消失。

另一个问题是当我缩小到 33% 或更低时， Logo 变得太小但它不会与导航栏保持相同的高度。

我也做了一些研究，发现在 bootstrap 3 中使用简单的 div 没有问题，但在 Bootstrap 4 中做同样的盒子拉伸(stretch)。

fiddler

Answer 1

您已经为您的 div 类 .sborder 设置了 100% 的宽度，并且您还设置了 15px 的左边距。这会使 div 超出图像范围。

使用css calc()方法设置.sborder的宽度

检查下面的代码和 fiddle

.sborder{
display: inline-block;
position: absolute;
bottom: 0;
/*right:15px;  doesn't work when the screen is zoomed out*/
width:calc(100% - 30px);
left: 15px;
height: 40%;
opacity: 0.5;
background-color: red;
color: #fff;
padding:0;
}

希望对你有帮助