Jssor滑块不同高度在风景

Question

我想在横向模式下更改“附近图像部分可见滑块”的高度，因为否则滑块会很高，你必须要看很多才能看到整个图像。

我正在使用媒体查询来更改横向模式的#slider1_container高度以及#slider1_container缩放内的所有元素;但div#slider1_container高度不会改变，因此图像下方会出现空白区域。

我需要一个能够像往常一样缩放#slider1_container的函数，但是对于纵向模式它将为1000px高度，对于横向模式它将为500px。 这是代码：

jQuery(document).ready(function($) {
    var options = {
        $AutoPlay: false,
        $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
        $ArrowKeyNavigation: true, //Allows arrow key to navigate or not
        $SlideWidth: 800, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
        //$SlideHeight: 300,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
        $SlideSpacing: 0, //Space between each slide in pixels
        $DisplayPieces: 2, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
        $ParkingPosition: 100, //The offset position to park slide (this options applys only when slideshow disabled).
        $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
            $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
            $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
            $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
        }
    };
    var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    //responsive code begin
    
    function ScaleSlider1() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if(parentWidth) jssor_slider1.$ScaleWidth(Math.min(parentWidth, 2000));
        else window.setTimeout(ScaleSlider1, 30);
    }
    ScaleSlider1();
    $(window).bind("load", ScaleSlider1);
    $(window).bind("resize", ScaleSlider1);
    $(window).bind("orientationchange", ScaleSlider1);
    });

这就是风格：

.slider1_container {
    position: relative;
    top: 0px;
    left: 0px;
    width: 1000px;
    height: 1000px;
    overflow: hidden;
}
.slider1_container .slides {
    cursor: move;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1000px;
    height: 1000px;
    overflow: hidden;
}
@media all and (orientation: landscape) {
    .slider1_container {
      position: relative;
      top: 0px;
      left: 0px;
      width: 1000px;
      height: 500px;
      overflow: hidden;
   }
   .slider1_container .slides {
      cursor: move;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1000px;
      height: 500px;
      overflow: hidden;
   }
}

更新了解决问题的代码

<div class="sliderWrapperPadding">
    <div class="sliderWrapperAbsolute">
        <div id="slider1_container">
            ...
        </div>
    </div>
</div>
<style>
    .sliderWrapperPadding {
        width: 100%;
        display: inline-block;
        position: relative;
        clear: both;
        padding-top: 100%;
    }
    .sliderWrapperAbsolute {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .slider1_container {
        position: relative;
        top: 0px;
        left: 0px;
        width: 1000px;
        height: 1000px;
        overflow: hidden;
    }
    @media all and (orientation:landscape) {
        .sliderWrapperPadding {
            padding-top: 50%;
        }
        .slider1_container {
            width: 1000px;
            height: 500px;
        }
</style>