jQuery Supersized ne s'étendant pas verticalement

Question

J'ai une image d'arrière-plan de 1920 x 1200 qui est redimensionnée avec jQuery Supersized. Il ne se redimensionne pas correctement verticalement; lorsque je redimensionne le navigateur, un espace apparaît dès que la largeur est limitée (et il doit remplir verticalement pour compenser, mais ce n'est pas le cas).

J'ai copié ces paramètres d'un autre utilisateur dont l'image 1920x1200 est parfaitement redimensionnée. Qu'est-ce que je rate?

Tout d'abord, le CSS: noter la hauteur/largeur sont 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; 
} 

Inséré 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> 

Answer 1

Sur la base de notre conversation et votre nouvelle question, voici un violon de travail sans centrage. http://jsfiddle.net/manishie/35qc7yht/

Vous devez modifier le code suivant:

horizontal_center: 0, // left align background 

Aussi s'il vous plaît voir mon violon mis à jour pour voir comment faire correctement un. Tout javascript va dans la section javascript, vous n'avez pas besoin des balises html et body, vous ajoutez jquery en utilisant le menu sur la gauche, et vous ajoutez des ressources externes (comme la bibliothèque agrandie aussi avec le menu sur la gauche)