Html 当引导转盘大小更改时，在图像上覆盖点以进行缩放

我有一个引导转盘和一个虚线覆盖

此处演示：

HTML:

<div class="banner">
    <div class="carousel slide">
        <div class="carousel-inner">
            <div class="item active"><img src="http://i.imgur.com/8hAR6s4.jpg" /></div>
            <div class="item"><img src="http://i.imgur.com/BPSXgEp.jpg" /></div>
            <div class="item"><img src="http://i.imgur.com/Vk1Y6v0.jpg" /></div>
        </div>
        <div class="overlay"></div>
    </div>
</div>
<script>$(".carousel").carousel();</script>

我的问题是，如果缩小窗口大小，图像的宽度将减小。图像保持纵横比，因此高度也会降低。但覆盖层的高度相同

---

如何使覆盖层的高度随图像收缩，或使图像溢出（首选程度较低）。

注释或删除css的以下部分

.carousel, .carousel-inner {
    height: 350px;
}

---

注释或删除css的以下部分

.carousel, .carousel-inner {
    height: 350px;
}

---

您应该使用

max height

属性来防止这种行为

.carousel, .carousel-inner {
    max-height: 350px;
}

这样，您就分配了一个

高度

，最大值为

350px

。使用

高度：350px

修复了该特定元素的

高度

，这会导致覆盖图像溢出

---

您应该使用

max height

属性来防止这种行为

.carousel, .carousel-inner {
    max-height: 350px;
}

这样，您就分配了一个

高度

，最大值为

350px

。使用

高度：350px

修复了该特定元素的

高度

，这会导致覆盖图像溢出

试试这个

.carousel {
       height: 100%;
       width : 100%;
}

&删除以前的代码

(.carousel, .carousel-inner {
    height: 350px;
})

希望它能为你工作

试试这个

.carousel {
       height: 100%;
       width : 100%;
}

&删除以前的代码

(.carousel, .carousel-inner {
    height: 350px;
})

---

希望它能为你工作

因此，我想我应该将图像裁剪到我想要的高度，而不是设置css高度？@Rickkwa，如果你想根据图像调整覆盖。。那么这个就行了。。为什么你需要裁剪图像？所以我想我应该裁剪图像到我想要的高度，而不是设置css高度？@Rickkwa，如果你想根据图像调整覆盖。。那么这个就行了。。为什么需要裁剪图像？