Question

当我调整浏览器窗口大小时，我在制作调整大小的精灵时遇到问题。模板的remiander是重要的，包括导航菜单。

精灵保持固定并在调整大小时突出页面。

如何使其大小与模板的其余部分一样（删除宽度滚动条）

如果你只是删除精灵，一切都会正确显示。

我创建了一个小提琴，但它没有显示我点击结果的时间。

我已将页面上传到此处：

Test Page

谢谢。

Answer 1

我可以使用的完美解决方案我用过这个解决方案它在除Android浏览器之外的所有浏览器上都可以正常工作

.playerSp { 显示：块; background：url（blue_sprite.png）no-repeat; } 。接下来按钮 { background-position：-83px -6px; 宽度：41px; 身高：46px; }

var abc=(screen.availHeight+screen.availWidth);
    $( window ).resize(function() {
    var aaa=($(document).height()+$(document).width());
    scale=abc/aaa;

      $('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
    });
</script>

Answer 2

所以我遇到了同样的问题，并注意到答案还没有在这里给出。这是答案：

我设法让我的精灵完全响应。为此我没有使用任何切片（photoshop）或javascript。还要注意精灵如何定位绝对，但仍然根据背景做出响应。

为了更好地了解此过程，请参阅以下链接：http://brianjohnsondesign.com/unlisted/demos/responsivesprite/

另请参阅我的链接，以了解它在我的网站上的显示效果：http://demo.chilipress.com/epic3/ 如果我的链接不再起作用，请尝试上面的第一个链接。

在这里看到CSS和HTML

#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}

#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}

HTML

<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>

Answer 3

你的精灵已修复height: 632px;＆amp; width: 1163px;如果您希望他们调整大小，请至少添加min-width和min-heigth属性

例如，如果你想让你的精灵调整到最小10 px，我们可以说你会将这些属性添加到你的代码中

#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}

您还可以使用媒体查询根据屏幕宽度或高度更改图像：例如：

@media screen and (max-width: 980px) {

    #sprite-main-v2 {
        height: 100 px; /*new size*/
        width:  100 px; /*new size, value just as example*/
        background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
    }
}

Answer 4

通过调整媒体查询中的背景位置和背景大小css属性，将精灵缩小到较小的设置大小。

background-position: 0 -135px;
background-size: 170px 190px;

这些数字就是一个例子，你必须和它们一起玩才能让它与你的精灵对齐，因为图像可能会消失，这可能会让人感到困惑。建议在开发人员工具中逐位调整它们。

您也可以使用百分比来调整响应速度，尽管这也很棘手。

请注意，background-size在IE8上不起作用，但媒体查询也不起作用....

Sprite Image Resize - 在调整浏览器大小时响应

4 个答案: