Отображение изображения с шириной 50% и высотой 100%

Question

Я пытаюсь создать систему рейтинга для моего форума, поэтому я работаю со Star-Images для каждого среднего рейтинга. Что я хотел бы сделать, так это отобразить половину такой звезды, если у пользователя есть, например, Средний рейтинг 4,5. Когда я создаю Div в CSS и изменяю ширину с помощью 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;
}

Я получаю всю звезду, масштабируемую до ширины 10 пикселей, но я хочу только 50% ширины изображения для половины звезды.

Что я получаю:

Есть предложения?

Большое спасибо

Answer 1

Да, теги <img> обрабатывают свою ширину иначе, чем теги <div>, как вы выяснили. Используйте <div>, а затем введите его вместо:

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

Используйте class="half" вместо идентификатора, чтобы вы могли использовать его снова и снова на странице.

Answer 2

может быть, вам нужно прямо так

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

Answer 3

Поместите изображение в качестве фонового изображения нового div, для которого вы установите ширину 50%