この画像リストを反応性（スケーラブル）にするにはどうすればよいですか？

Question

私は自分のサイトで星評価システムを実装しましたが、他のコンテンツと一緒に画像を拡大するのは苦労しています。私が使用しているHTMLコードは次のとおりです。

<ul id="aff_rating"> 
    <li><img src="/images/star_on.png" class="star_on starrating-1"></li> 
    <li><img src="/images/star_on.png" class="star_on starrating-2"></li> 
    <li><img src="/images/star_on.png" class="star_on starrating-3"></li> 
    <li><img src="/images/star_on.png" class="star_on starrating-4"></li> 
    <li><img src="/images/star_off.png" class="star_off starrating-5"></li> 
</ul> 

私は、ユーザーが単にページ上の他の画像のような彼らのブラウザウィンドウのサイズを変更して星を縮小する必要があります。

Answer 1

イメージにパーセント幅を定義し、親コンテナに合わせてサイズを変更できるように<li>コンテナを定義するか、または@mediaクエリを使用して異なるサイズを設定できます。ベース

割合：：ベース

#aff_rating li { 
    float:left; 
    margin-right:6px; 
    width:18%; 
} 

#aff_rating li img { 
    width:100%; 
    height:auto; 
} 

demo

@mediaクエリ：

@media screen and (max-width:767px) { 
    #aff_rating li { 
     width:30px; /* define a proper width that you think is right */ 
    } 
} 

demo（テストに結果ウィンドウのサイズを変更する）。ここ

はあなたが試すことができる2つの方法があります