css - 轮播与背景图像的缩放方式不同

Question

我有以下标记：

<section class="block">

<img class="img-background" src="assets/background_banner.png" alt="" >

    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
              <div class="active item">
          <img src="assets/banner_1.png" alt="" >
                     </div>

像这样的CSS：

.img-background{
position:absolute;
margin-left:50%;
left:-512px;
top:0px;
z-index:1;
}

.carousel{
    position:absolute;
margin-left:50%;
left:-512px;
top:0px;
z-index:2;
}

.carousel .item {
    width: 100%; /*slider width*/
    height: auto; /*slider height*/

}
.carousel .item img {
margin-left: 0%;
    width: 100%; /*img width*/

}
/*full width container*/
@media (max-width: 767px) {
    .block {
 margin-left: -20px;
        margin-right: -20px;
    }
}

它在浏览器全屏时工作。我有一个背景图像和一个旋转木马幻灯片。但是当我让浏览器变小时，旋转木马会在图像缩放时保持很大。我希望它们都以相同的方式扩展。这可能吗？

Answer 1

如果要随轮播一起缩放图像，请添加 width: 100%; 看看会发生什么。

.img-background{
position:absolute;
margin-left:50%;
left:-512px;
top:0px;
z-index:1;
width: 100%;
}

虽然工作代码的示例会更好地调试。

我个人会将图像用作背景图像。也许将它从 HTML 中删除并将其添加到您的 CSS 中，如下所示：

.block {
    background: url(assets/background_banner.png) no-repeat;
}