jssor滑塊：垂直對齊圖像 - 使用flexslider代替

Question

我有一個完整頁面的jssor滑塊。由於圖片縮放爲「覆蓋」，如果它們太高，它們會在底部被切斷。

我希望能夠爲每個圖像指定它應該是垂直居中還是底部對齊（或默認頂部對齊），因此我可以確保每個圖像的重要部分始終顯示。

我試過vertical-align樣式div包含img沒有運氣。

然後，我已經嘗試計算所需的偏移量，並將負值margin-top應用於太高的圖像 - 代碼位於下方。這可以在全寬度下工作，但是當我調整窗口的大小到一定寬度以下時，將圖片壓得太高 - 在底部留下空白區域。我一直無法弄清楚如何阻止這種情況的發生。

有沒有人得到這樣的工作？有沒有內置的功能，我已經錯過了？

HTML（我想補充的節目底部類只出現在相關幻燈片）：

<div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1200px; height: 900px; display: none;"> 
    <!-- Slides Container --> 
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1200px; height: 900px; overflow: hidden;"> 
     {% for slide in slides %} 
      <div><img class="slide-image show-bottom" u="image" src="/site_media/{{ slide }}" /></div> 
     {% endfor %} 
    </div> 
</div> 

JS：

var options = { 
    $SlideDuration: 700,        //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
    $DragOrientation: 1,        //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) 
    $AutoPlay: true,         //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false 
    $AutoPlayInterval: 4000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
    $SlideEasing: $JssorEasing$.$EaseInQuart, 
    $ArrowKeyNavigation: true,       //[Optional] Allows keyboard (arrow key) navigation or not, default value is false 
    $PauseOnHover: 0,         //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 
    $FillMode: 2,          //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0 
}; 

var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

//responsive code begin 
//you can remove responsive code if you don't want the slider scales while window resizes 
function ScaleSlider() { 
    var windowWidth = $(window).width(); 

    if (windowWidth) { 
     var windowHeight = $(window).height(); 
     var originalWidth = jssor_slider1.$OriginalWidth(); 
     var originalHeight = jssor_slider1.$OriginalHeight(); 

     var scaleWidth = windowWidth; 
     if (originalWidth/windowWidth > originalHeight/windowHeight) { 
      scaleWidth = Math.ceil(windowHeight/originalHeight * originalWidth); 
     } 


     jssor_slider1.$ScaleWidth(scaleWidth); 


     // I added this bit: 
     // Adjust vertical alignment 
     $('.slide-image.show-bottom').each(function() { 
      var $this = $(this) 

      if ($this.height() > windowHeight) { 
       $this.css('margin-top', windowHeight - $this.height()) 
      } 
     }) 
     // End vertical alignment 


    } 
    else 
     window.setTimeout(ScaleSlider, 30); 
} 

ScaleSlider(); 

$(window).bind("load", ScaleSlider); 
$(window).bind("resize", ScaleSlider); 
$(window).bind("orientationchange", ScaleSlider); 
//responsive code end 

UPDATE： 好像有什麼東西做的height: 900px;在img上設置。這是jQuery用.height（）找到的高度，無論jssor應用的實際高度如何。 jssor縮放後如何獲得實際高度？這似乎是關鍵。

Answer 1

如果有人有興趣，我能夠做什麼，我需要Flexslider到底。

<section id="featured" style="height:900px"> 
    <div class="flexslider" style="max-height: 100%;"> 
     <ul class="slides" style="max-height: 100%;"> 
      {% for slide in slides %} 
       <li> 
        <img style="visibility: hidden" src="{{ MEDIA_URL }}{{ slide }}" alt="{{ slide.title }}" title="{{ slide.title }}"> 
       </li> 
      {% endfor %} 
     </ul> 
    </div> 
</section> 


<script type="text/javascript"> 

    $('.flexslider').flexslider({options}); 

    scaleImages(); 

    $(window).resize(function() { 
     setSliderHeight() 
     scaleImages() 
    }); 

    function scaleImages() { 
     var $images = $('.flexslider .slides img'); 
     $images.css("width", ''); 
     $images.css("height", $('#featured').height()); 
     setTimeout(function(){ 
      $images.each(function(){ 
       var $this = $(this); 
       var parentWidth = $this.parent().width(); 
       var widthDelta = parentWidth - $this.width(); 
       if (widthDelta < 0) { 
        $this.css('margin-top', ''); 
        $this.css('margin-left', widthDelta/2); 
       } else { 
        $this.css('margin-left', ''); 
        // scale width (to assimilate 'cover', take this out to 'contain') 
        if (widthDelta > 0) { 
         $this.height('auto') 
           .width(parentWidth); 
         var heightDelta = $('#home-featured').height() - $this.height(); 
         $this.css('margin-top', heightDelta/2); 
         widthDelta = parentWidth - $this.width(); 
         if (widthDelta < 0) { 
          $this.css('margin-left', widthDelta/2) 
         } 
        } 
       } 
       $images.css('visibility', ''); 
      })}, 100); 
    } 

    function setSliderHeight(){ 
     $('#home-featured').height($(window).height()); 
    } 

    setSliderHeight() 
</script> 

注意，而不是使用100vh，我在JS的高度設置由於在IOS與具有動態內容元素VH/VW屬性的一個錯誤。

Answer 2

2種方式在jssor滑塊中填充和對齊圖像。

1. 通過指定$ FillMode選項並指定u =「image」作爲圖像元素來自動填充/對齊。 （例如< img u =「image」...）
2. 通過從圖像元素中移除u =「圖像」並指定圖像元素的css來手動填充/對齊。 （例如< img style =「position：relative; top：... px; left：... px; width：... px; height：... px; ...」src = ...）

要檢索滑塊的原始大小和縮放大小，請使用以下api。

$ScaleWidth() //formerly known as $GetScaleWidth() 
//Retrieve scaled width the slider currently displays 

$ScaleWidth(width) //formerly known as $SetScaleWidth(width) 
//Scale the slider to new width and keep aspect ratio 

$ScaleHeight() //formerly known as $GetScaleHeight() 
//Retrieve scaled height the slider currently displays 

$ScaleHeight(height) 
//Scale the slider to new height and keep aspect ratio 

$OriginalWidth() //formerly known as $GetOriginalWidth() 
//Retrieve original width of the slider 

$OriginalHeight() //formerly known as $GetOriginalHeight() 
//Retrieve original height of the slider 

參考：http://www.jssor.com/development/reference-api.html