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

我得到：

有什么建议吗？

非常感谢

答

可能是你需要右键这样

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

答

把图像作为一个新的div的背景图片，而你设置宽度50％

答

是，<img>标签处理其宽度不同于<div>标签，因为你是发现。使用<div>，然后它的样式改为：

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

使用class="half"，而不是一个ID，这样你可以在页面上一遍又一遍地重复这一点。

50％宽度和100％高度的显示图像

相关推荐