1

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

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

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

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

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

我已将页面上传到这里：

测试页

谢谢你。

4

4 回答 4

2

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

.playerSp { 显示：块；背景：url（blue_sprite.png）不重复；} .next-button { 背景位置：-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>

于 2013-12-19T12:09:17.953 回答
1

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

我设法让我的精灵完全响应。为此，我没有使用任何切片（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>
于 2014-03-25T06:29:28.617 回答
0

你的精灵已经固定了height: 632px;，width: 1163px;如果你想让它们调整大小，你应该至少添加一个min-width和一个min-heigth属性

例如，如果您希望您的精灵调整到最小 10 像素，假设您将这些属性添加到您的代码中

#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*/
    }
}
于 2013-05-19T14:22:42.687 回答
0

通过在媒体查询中调整其 background-position 和 background-size css 属性，将您的精灵缩小到更小的集合大小。

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

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

您还可以使用百分比来实现更灵敏的调整大小，尽管这也可能会变得很棘手。

请注意，背景大小在 IE8 上不起作用，但媒体查询也不起作用......

于 2013-10-16T22:01:49.073 回答