jQuery Supersized Not Stretching Vertically

我有一個1920x1200的背景圖像，這是與jQuery Supersized調整大小。它沒有正確調整垂直方向;當我調整瀏覽器大小時，寬度受到限制時會出現間隙（並且它必須垂直填充以補償，但不會）。jQuery Supersized Not Stretching Vertically

我從1920x1200圖像完美調整大小的其他用戶複製這些設置。我錯過了什麼？

首先，在CSS：注意高度/寬度是100％：

* { 
    margin: 0; 
    padding: 0; 
} 

#supersized a { 
    background: none repeat scroll 0 0 #111; 
    height: 100%; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -30; 
} 

#supersized a.activeslide { 
    z-index: -10; 
}

插入的JS：

<link media="screen" type="text/css" href="css/master.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script> 
<script src="js/supersized.core.3.2.1.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

      jQuery(function($){ 

       $.supersized({ 

         //Functionality 
        slideshow : 0, //Slideshow on/off 
        autoplay : 1, //Slideshow starts playing automatically 
        start_slide : 1, //Start slide (0 is random) 
        random : 0, //Randomize slide order (Ignores start slide) 
        slide_interval : 6000, //Length between transitions 
        transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
        transition_speed : 500, //Speed of transition 
        new_window : 1, //Image links open in new window/tab 
        pause_hover : 0, //Pause slideshow on hover 
        keyboard_nav : 0, //Keyboard navigation on/off 
        performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 
        image_protect : 1, //Disables image dragging and right click with Javascript 
        image_path : 'img/', //Default image path 
        //Size & Position 
        min_width : 0, //Min width allowed (in pixels) 
        min_height : 0, //Min height allowed (in pixels) 
        vertical_center : 1, //Vertically center background 
        horizontal_center : 1, //Horizontally center background 
        fit_portrait : 1, //Portrait images will not exceed browser height 
        fit_landscape : 0, //Landscape images will not exceed browser width 
        //Components 
        navigation : 0, //Slideshow controls on/off 
        thumbnail_navigation : 0, //Thumbnail navigation 
        slide_counter : 0, //Display slide numbers 
        slide_captions : 0, //Slide caption (Pull from "title" in slides array)     

        slides : [ {image : 'example.com/image.png', title : 'Test'} ] 
       }); 
      }); 

     </script>

來源

2014-09-22 gene b.

你可以做一個小提琴 – manishie 2014-09-22 04:31:57

謝謝你，小提琴的工作，這裏是 - http://jsfiddle.net/f7jvnqms/1/ 它幫助我解決了這個問題。問題是它沒有找到超級CSS。我將這個CSS粘貼到主CSS中，它開始工作這是我的另一個問題：有沒有辦法讓圖像停留在Left/Top？現在，Supersized總是居中它 – 2014-09-22 23:05:01

我現在來看看。 .. – manishie 2014-09-22 23:07:17

根據我們的談話和你的新問題，這裏的工作小提琴沒有集中。 http://jsfiddle.net/manishie/35qc7yht/

您需要修改下面的代碼：

horizontal_center: 0, // left align background

也請看到我的更新，小提琴，看看如何正確地做一個。所有的javascript都在javascript部分，你不需要html和body標籤，你可以使用左邊的菜單添加jquery，並且你可以添加外部資源（比如超大型的庫也可以使用左邊的菜單）

來源

2014-09-22 23:16:36 manishie

非常好，謝謝 – 2014-09-22 23:23:09

jQuery Supersized Not Stretching Vertically

回答

相關問題