Question

我正在尝试为我的论坛制作评级系统，因此我使用Star-Images获得每个平均评分。我想做的是，如果用户有例如这样的星形，则显示一半。平均评分为4.5。当我在CSS中设计Div并使用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

将图像作为新div的背景图像，其中设置宽度为50％

Answer 2

是的，<img>标记处理的宽度与<div>标记的处理方式不同，正如您所发现的那样。使用<div>，然后改为样式：

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

使用class="half"代替ID，以便您可以在页面上反复重复使用。

Answer 3

可能你必须像这样

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

显示宽度为50％，高度为100％的图像

3 个答案: