使用图像精灵作为CSS背景图像的响应式网格

Question

哇，这比我预期的要难！

我们试图在网格中的响应网站上使用图像精灵作为CSS背景图像。

请check out our jsfiddle of the scenario。

所以基本上，当这个尺寸被调整时，精灵的背景图像需要调整大小以适应父容器（<span>）。

我已经将背景图像转换为data:image，认为这将是第一步（尽管我不确定），现在还不能确定如何让精灵的背景图像响应。

到目前为止我所尝试过的一切都会在网格中的每个容器中显示完整的精灵图像。

Answer 1

您在流体设置中使用绝对像素值和背景大小。 尝试将背景位置转换为流体单位（如百分比）并添加背景大小以允许Spritesheet使用容器调整大小。

通过去除图像容器的内高度和施加填充，可以使容器的高度比保持相同：通过计算而不是像素的子画面的位置的百分比坐标

.credits-grid li span.image { 
    background: url(../images/credits.png) no-repeat; 
    padding-top: 90%; 
    height: 0; 
    overflow: hidden; 
    background-size: 500% auto; 
} 

然后值，你可以让它*地移动到位作为容器的尺寸改变：

.credits-grid li span.image.c10 { 
    background-position: -26% 50%; 
} 

你可以看到在行动此此琴在这里：http://jsfiddle.net/nsvka987/2/