Question

我有一个自举旋转木马和一个虚线覆盖。

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;
}

.overlay {
    background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

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

如何使叠加层的高度随图像缩小，或溢出图像（不太喜欢）。

Answer 1

DEMO

.carsoul{height:100%; width:100%}
.carousel, .carousel-inner {
    height: 100%;
}

.overlay {
    background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Answer 2

您应该使用max-height属性来阻止此行为

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

这样，您指定的height最多为350px。使用height: 350px;修复了该特定元素的height，后者会导致叠加图像溢出。

Demo

Answer 3

评论或删除以下css部分

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

Answer 4

试试这个..

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

＆安培;删除以前的代码

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

希望它对您有用!!

当引导轮播尺寸改变时，在图像上加点虚线覆盖以缩放

4 个答案: