高さ50％、高さ100％の画像を表示

Question

私はフォーラムの評価システムを作ろうとしていますので、平均評価ごとにスター画像を使っています。 私がしたいのは、そのようなスターの半分を、ユーザーが例えば、平均格付け4.5。 私はCSSでDivsを設計し、document.getElementById（ 'foo'）で幅を変更します。style.width = "50％";それは魔法のように動作しますが、私はそのようにそれを行うとき：

私のビュー：

<div id="half"><%= image_tag('../images/icons/rating_3.gif', options = {:style => 'width: 50%; height: 100%;'}) %></div 

CSS：

#half { 
width: 20px; 
height: 20px; 
display: inline-block; 
} 

私は10pxの幅が、私にリサイズ全体の星を取得しています画像の半分の星の50％の幅しか必要としません。

私が得るもの：

何か提案がありますか？

おかげでたくさん

Answer 1

は、あなたがこの

#half { 
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    background-position:50% 0; 
overflow:hidden; 
    } 

のように右に持っているかもしれ

Answer 2

はあなたがそうであるように幅50％が

Answer 3

はい、<img>タグは、異なっ<div>タグよりもその幅を処理しているの新しいdiv要素の背景画像として画像を入れて見つけ出す。 <div>を使用して、代わりにそれをスタイル：

div.half { 
    overflow: none; 
    width: 10px; 
    height: 20px; 
    background-image: url('star.gif'); 
    display: inline-block; 
} 

利用class="half"の代わりにIDを使用すると、ページ上で何度もこれを再利用できるようにします。