html - 响应式 CSS Sprite(从上到下的 Sprite )

Question

我正在寻找响应式 Sprite 。我能够找到许多具有宽度(从左到右的 Sprite 图像)但不是响应式的从上到下的 Sprite 的帖子。

我的响应式网站上有一个 sprite，它在全尺寸桌面窗口中看起来很棒，但 sprite 本身对屏幕尺寸没有响应。

这是我的 CSS:

div.dylansprite {
width:850px;
height:250px;
background:url(../images/Dylan-sprite.png) -0px -0px;
}

div.dylansprite:hover {
background:url(../images/Dylan-sprite.png) -0px -100%;
}

这是我的 HTML:

<div class="dylansprite"></div>

这会在悬停期间在全尺寸窗口中正确显示 Sprite ，但是当您缩小窗口以使其响应时，该图像将保持全尺寸。破坏我的响应式网站。

我意识到我必须在某处的宽度上加上一个百分比，我只是不知道该怎么做。这是显示顶部(无悬停)到底部(悬停) Sprite ，但使用宽度根据窗口宽度调整大小。

Answer 1

使用这个 CSS:

div.dylansprite {
    width:850px;
    height:250px;
    background:url(../images/Dylan-sprite.png) -0px -0px;
    background-size: cover
}

background-size: cover 保持纵横比不变