0

次のマークアップがあります。

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

ブラウザがフルスクリーンのときに機能します。背景画像とその上にカルーセル スライドがあります。しかし、ブラウザを小さくすると、カルーセルは大きく保たれますが、画像は拡大縮小されます。両方を同じようにスケーリングしたい。これは可能ですか？

4

1 に答える 1

0

カルーセルに合わせて画像を拡大縮小する場合は、 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;
}
于 2013-09-01T00:13:00.900 に答える