2

インデックスページにカルーセルがありますが、ブラウザを縮小すると、画像がカルーセル全体に収まらないことに気付きました。

私が何を意味するのかわからない場合は、ブラウザを縮小した後のカルーセルの画像を次に示します。ここに画像の説明を入力してください

ご覧のとおり、画像の幅はブラウザのウィンドウサイズに反応しますが、高さは反応しないため、画像の下に大きな空白が残ります。

これが私の現在のコードです：

<div class='carousel slide' id='hero' style='position: absolute;'>
<div class='carousel-inner' style='z-index: -1'>
<div class='active item'>
    <img src='images/index/img1.jpg'>
</div>
<div class='item'>
    <img src='images/index/img2.jpg'>
</div>
<div class='item'>
    <img src='images/index/img3.jpg'>
</div>
<div class='item'>
    <img src='images/index/img4.jpg'>
</div>
<div class='item'>
    <img src='images/index/img5.jpg'>
</div>
<div class='item'>
    <img src='images/index/img6.jpg'>
</div>
</div>
</div>

カルーセル内の画像を小さなブラウザウィンドウに応答させるにはどうすればよいですか？

4

1 に答える 1

1

それで、さらに調査した後、自分で修正しました。

CSSでは、これがありました：

.carousel-inner {
    overflow:hidden;
    width:100%;
    position:relative;
}

幅100％の代わりに画像の寸法を入れることで修正しました。

.carousel-inner {
    overflow:hidden;
    width:1920px;
    height:1200px;
    position:relative;
}
于 2013-01-14T17:46:15.153 に答える