jssor 滑块：垂直对齐图像 - 使用 flexslider

Question

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

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

我在包含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 滑块中填充和对齐图像的两种方法。

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

要获取滑块的原始大小和缩放大小，请使用以下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

Answer 2

如果有人感兴趣，我最终可以使用 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 属性。