以 50% 宽度和 100% 高度显示图像答案

【问题标题】：Display Image with 50% width and 100% height以 50% 宽度和 100% 高度显示图像
【发布时间】：2011-10-20 09:54:06
【问题描述】：

我正在尝试为我的论坛创建一个评分系统，因此我使用 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;
}

我将整颗星调整为 10 像素宽度，但我只想要半颗星的图像宽度的 50%。

我得到了什么：

有什么建议吗？

非常感谢

【问题讨论】：

标签： html ruby-on-rails css image format

【解决方案1】：

也许你必须这样

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

【讨论】：

【解决方案2】：

把图片作为新div的背景图片，你设置的宽度为50%

【讨论】：

【解决方案3】：

是的，<img> 标签处理它们的宽度不同于<div> 标签，正如您所发现的。使用 <div> 然后设置样式：

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

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

【讨论】：