div中宽度为%的CSS精灵？答案

【问题标题】：Css sprite in div with width %?div中宽度为%的CSS精灵？
【发布时间】：2016-09-27 10:21:32
【问题描述】：

是否可以在 div 中使用 Css sprite 图像，而 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 sprite 将被“剪切”。被剪掉是因为 div 的新闻宽度变小了，但是尺寸.sprite-gloss-vulc-anello 还是一样的。

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

【问题讨论】：

responsive sprites / percentages的可能重复

标签： html css css-sprites liquid-layout

【解决方案1】：

你给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%;
}

【讨论】：

【解决方案2】：

很遗憾，您不能使用带有百分比的精灵图像。

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

如果您想根据父 div 动态调整图像大小，您应该将其用作单独的图像文件。

【讨论】：