css - レスポンシブ CSS バックグラウンド プロパティ

Question

私はこのマークアップを持っています:

 <ol class="carousel-indicators">

 <li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span>
 </li>

 <li data-target="#ShowCarousel-03" data-slide-to="1">
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span>
 </li>

 <li data-target="#ShowCarousel-03" data-slide-to="2">
    <h4>Title</h4><br/><h5>Test</h5><br/><span>+</span>
 </li>

 <li data-target="#ShowCarousel-03" data-slide-to="3">
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span>
 </li>

そしてこのCSS：

.carousel-indicators li{
    display:block;
    float:left;
    background: url(images/triangle.png) no-repeat;
    width:320px;
    height:176px;
    cursor: pointer;
    text-align:center;
}

マークアップのコンテナ div の幅は100%に設定されています

私の実際の解像度 (幅 1366 ピクセル) では、li 要素は適切に配置されていますが、ブラウザのサイズを変更すると要素が配置されません。

Twitter ブートストラップ フレームワークを使用しています。

私の質問は、解像度が低いときにこの要素を拡大縮小するにはどうすればよいですか?

ありがとう！