가로 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

당신이로

Answer 3

예, <img> 태그, <div> 태그는 다르게 자신의 폭을 처리하면 폭이 50 %를 설정하는 새로운 사업부의 배경 이미지로 이미지를 넣어 알아 내기. <div>를 사용하고 대신에 스타일 :

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

사용 class="half" 대신의 ID 당신이 페이지에 반복이를 다시 사용할 수 있도록.