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

如果要将图像与旋转木马一起缩放，则添加宽度：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;
}

旋转木马的缩放方式与背景图像不同

1 个答案: