50％寬度和100％高度的顯示圖像

我正在嘗試爲我的論壇製作評分系統，因此我使用Star-Images進行平均評分。我想要做的是顯示一半這樣的明星，如果用戶有例如平均評分爲4.5。當我在CSS中設計Divs並使用document.getElementById（'foo'）。style.width =「50％」更改寬度時;它就像一個魅力，但是當我那樣做：50％寬度和100％高度的顯示圖像

我的觀點：

<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％寬度。

我得到：

有什麼建議嗎？

非常感謝

來源

2011-10-20 Nenzo

可能是你需要右鍵這樣

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

來源

2011-10-20 09:58:59 sandeep

把圖像作爲一個新的div的背景圖片，而你設置寬度50％

來源

2011-10-20 09:56:32 samn

是，<img>標籤處理其寬度不同於<div>標籤，因爲你是發現。使用<div>，然後它的樣式改爲：

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

使用class="half"，而不是一個ID，這樣你可以在頁面上一遍又一遍地重複這一點。

來源

2011-10-20 09:58:01

50％寬度和100％高度的顯示圖像

回答

相關問題