如何防止spritesheet在调整大小期间显示其他精灵

Question

我想用精灵表制作旋转图像库。我基本上想要旋转两个堆叠在一起的图像。

我希望这个画廊具有响应性和灵活性，占窗口宽度的百分比。

但是，我意识到，如果我将background-size设置为100%（为了使精灵填充包含div，在调整浏览器窗口大小时，包含的其他精灵在精灵表中将显示。我无法弄清楚使用精灵制作完全响应背景图像的设置。

这是我到目前为止的地方：

HTML

<div id="imageone" class="sprite"><div>
<div id="imagetwo" class="sprite"><div>

CSS

div {
   width: 50%;
}

.sprite {
    background-image url('../images/gallery_sprite.jpg');
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    background-clip: content-box;
    background-size: 100% auto;
}

滚动（调整窗口大小）让其他精灵显示出来。非常感谢任何帮助。