Question

我正在寻找一个响应精灵。我能够找到许多具有宽度（从左到右的精灵图像）的帖子，但不能找到具有响应性的从顶部到顶部的精灵。

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

这是我的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>

这会在正确大小的窗口中正确显示精灵并悬停，但是当您缩小窗口以使其响应时，此图像将保持完整大小。打破我的响应式网站。

我意识到我必须在某个地方放一个百分比，我不知道该怎么做。这是显示顶部（没有悬停）到底部（悬停）精灵，但使用宽度根据窗口宽度调整大小。

Answer 1

使用此CSS：

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

background-size: cover保持宽高比相同

响应式CSS精灵（从上到下的精灵）

1 个答案: