JS Supersized插件 - 在视口边缘切断的图像

问题描述

因此，我使用Supersized插件（http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/）在网站后面显示美丽的背景图片。它通常延伸到适合您的浏览器窗口的大小。在iPad上，背景在视口的最后切断。我可以捏看到整个网站，放大就好了。但背景仍然存在。

我需要做的最重要的事情是图像填充了内容的长度和高度。 Link and css below：

任何帮助非常感谢，在这里的枪下。感谢。

  / *超大样式* / 
＃supersized-loader {position：absolute;顶部：50％;左：50％;的z-index：0;宽度：60像素;高度：60像素;保证金：-30px 0 0 -30px; TEXT-INDENT：-999em;背景：url（../ img / progress.gif）no-repeat center center;} 
 
 #perspersized {display：block;位置是：固定;左：0;顶部：0;溢出：隐藏;的z-index：-999;高度：100％;宽度：100％; } 
 #supersized img {width：auto;高度：自动;位置：相对;显示：无;概述：无;边界：无; } 
＃supersized.speed img {-ms-interpolation-mode：nearest-neighbor;图像渲染：-moz-crisp-edges; } / *速度* / 
＃supersized.quality img {-ms-interpolation-mode：bicubic;图像渲染：优化质量; } / *质量* / 
 
 #supersized li {display：block;保证金：0;列表样式：无;的z-index：-30;位置是：固定;溢出：隐藏;顶部：0;左：0;宽度：100％;高度：100％;背景：＃111; } 
 #perspersized a {width：100％;高度：100％;显示：块; } 
 #supersized li.prevslide {z-index：-20; } 
 #supersized li.activeslide {z-index：-10; } 
 #supersized li.image-loading {background：＃111 url（../ img / progress.gif）no-repeat center center;宽度：100％;高度：100％; } 
 #supersized li.image-loading img {visibility：hidden; } 
 #supersized li.prevslide img，#supersized li.activeslide img {display：inline; } 
 / *超大样式结束* / 
  

解决方案

我想通过iPhone / iPad的CSS媒体查询解决它的一种方法。这可能不是最好的方式，更像是将磁带放在上面，这样它就可以保持在一起。但它的工作原理让我很开心：

/ *修复了iOS * /
$ * iPad [肖像+风景] * /
@media仅限屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）{
＃ （最大设备宽度：1024px）
和（min-device-width：768px）
仅限于屏幕
和{min-device-width：768px}
}
和（orientation：portrait）{
#perspersized {width：110％！important;}
}


/ * iPhone [portrait + landscape ] * /
@media唯一屏幕和（最大设备宽度：480px）{
#perspersized {margin-left：0; }
}


So I'm using the Supersized plugin (http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/) to display beautiful background images behind the site. It normally stretches to fit whichever size your browser window is. On the iPad, the background cuts off at the end of the viewport. I can pinch to see the whole site and zoom in just fine. But the background stays put.

The most important thing I need to have is the images fill the length and height of the content. Link and css below:

http://www.xsp.com/new_site/index.php

Any help is greatly appreciated, under the gun here. Thanks.

    /* Supersized styles */
    #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

    #supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
    #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
    #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
    #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }           /*Quality*/

    #supersized li { display:block; margin: 0; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
    #supersized a { width:100%; height:100%; display:block; }
    #supersized li.prevslide { z-index:-20; }
    #supersized li.activeslide { z-index:-10; }
    #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
    #supersized li.image-loading img{ visibility:hidden; }
    #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
    /* Supersized styles end */

解决方案

I figured out one way to fix it with iPhone/iPad css media queries. It's probably not the best way, more like putting tape on it so it will hold together. But it works so I'm happy:

/*Fix Supersized on iOS*/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#supersized { margin-left:0;}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#supersized { width:110% !important;}
}


/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
#supersized { margin-left:0; }
}

这篇关于JS Supersized插件 - 在视口边缘切断的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！