Sprite图片调整大小 - 在调整浏览器大小时进行响应

我在调整浏览器窗口大小时调整了sprite的大小。该模板的remiander是密集的，包括导航菜单。Sprite图片调整大小 - 在调整浏览器大小时进行响应

sprite保持不变，并在调整大小时伸出页面。

我将如何使它大小一样的模板（除去宽度滚动条）

的其余部分如果你只是正确地删除精灵一切显示器。

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

我已经上传网页到这里：

Test Page

谢谢。

来源

2013-05-19 Maverick

小提琴这里如果任何帮助：http://jsfiddle.net/CZ97B/ – Maverick

你的精灵有固定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; 
}

，您还可以使用媒体查询来改变图像acording屏幕宽度或高度：例如：

@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-19 14:22:42

真的很感谢你的帮助。但不能解决任何问题。解决方案1：没有影响解决方案2：保持不变，直到浏览器移动大小，然后图像消失，但宽度滚动条仍然像图像仍然存在。 – Maverick

通过在媒体查询中调整其背景位置和背景大小css属性，将精灵缩小为更小的集合大小。

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

这些数字就是一个例子，你必须和他们一起玩让它与你的精灵，它可以作为图像可以消失混乱排队。建议在开发人员工具中一点一点调整它们。

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

注意，背景大小不IE8的工作，但没有做媒体查询....

来源

2013-10-16 22:01:49 stuartdotnet

完美的解决方案我有ü可以使用我已经使用这个解决方案并能正常工作在所有的浏览器Android Browser

.playerSp display：block; background：url（blue_sprite.png）no-repeat; } 。下一步按钮 { background-position：-83px -6px; width：41px; height：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-19 12:09:17 pareshm

所以我坚持了同样的问题，发现答案尚未这里给出。这里是答案：

我已经设法让我的精灵完全响应。为此，我没有使用任何切片（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-25 06:29:28

Sprite图片调整大小 - 在调整浏览器大小时进行响应

回答

相关问题