jquery - jssor slider : vertical-align images – flexslider used instead

Question

我有一个整页的 jssor slider 。当图片被缩放以“覆盖”时，如果它们太高，它们会在底部被切断。

我希望能够为每张图片指定是垂直居中还是底部对齐(或默认的顶部对齐)，这样我就可以确保每张图片的重要部分始终显示。

我已经在包含 img 的 div 上尝试了 vertical-align 样式，但没有成功。

然后我尝试计算所需的偏移量并将负 margin-top 应用于太高的图像 – 下面的代码。这适用于全宽，但当我将窗口调整到一定宽度以下时，图片会被推得太高——在底部留下空白。我一直无法弄清楚如何阻止这种情况发生。

有人用过这样的东西吗？是否有我错过的内置功能？

HTML(我只会在相关幻灯片上添加 show-bottom 类):

<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

更新: 好像和img上设置的height: 900px;有关。这是 jQuery 使用 .height() 找到的高度，无论 jssor 应用的实际高度如何。 jssor缩放后如何获取实际高度？这似乎是症结所在。

Answer 1

在 jssor slider 中填充和对齐图像的 2 种方法。

1. 通过指定 $FillMode 选项并为图像元素指定 u="image"来自动填充/对齐。 (例如
2. 通过从图像元素中删除 u="image"并为图像元素指定 css 来手动填充/对齐。 (例如

要检索 slider 的原始大小和缩放后的大小，请使用以下 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