Css sprite in div with width％？

Question

可能在div中有一个Css精灵的图像，width在％？

现在，我想这而不是作品：

.sprite-gloss-vulc { 
    background-image: url("/images/sprite-img.png"); 
} 

.sprite-gloss-vulc-anello { 
    background-position: -1px -0px; 
    width: 120px; 
    height: 120px; 
} 

#flex { 
width: 17%; 
} 

img { 
    width: 120px; 
    height: 120px; 
} 


<div id="flex"> 
    <img src="/images/transparent.gif" class="sprite-gloss-vulc sprite-gloss-vulc-anello"> 
</div> 

当DIV父的宽度大于120像素（宽img）的作品更大，但如果我调整页面的CSS精灵是“腰斩”。 因为div的消息宽度较小而被剪切，但尺寸.sprite-gloss-vulc-anello它们仍然相同。

我希望你能原谅我的英语，帮助我...... 非常感谢！

Answer 1

不幸的是，你不能使用百分比的精灵图像。

您可以将max-width属性添加到sprite-gloss-vulc-anello或img标签，但我也不会工作。

如果你想要根据父div动态调整图像大小，你应该使用它作为一个单独的图像文件。

Answer 2

你给高度宽度和两次img标签和类

.sprite-gloss-vulc { 
    background-image: url("/images/sprite-img.png"); 
} 

.sprite-gloss-vulc-anello { 
    background-position: -1px -0px; 
    width: 100%; 
    height: 100%; 
} 

#flex { 
width: 100%; 
}