這種 slider 無法調整高度？

Question

https://www.jssor.com/demos/f...

我是找到這個
他是螢幕依照比例調整高度
所以我如果縮成手機版，他就會變得很小
我調整他的 div 卻一點反應也沒有

css

.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.index-setting-cover{
  object-fit: cover;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

@keyframes jssorl-009-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.jssorLayout{position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;visibility:hidden;}
.sliders{cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden; border:0;}

.spin{position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:#fff;}
.spanIcon{margin-top:-19px;position:relative;top:50%;width:38px;height:38px;}
.bullet{position:absolute;bottom:12px;right:12px;}
.bulletdisplay{position:absolute;top:0;left:0;width:100%;height:100%;}
.prototype{width:16px;height:16px;}

.jssorb032 {position:absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;}
.jssorb032 .i .b {fill:#C9C9C9;fill-opacity:0.7;stroke:#C9C9C9;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
.jssorb032 .i:hover .b {fill:#fff;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .iav .b {fill:#fff;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .i.idn {opacity:.3;}

.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}

@media screen and (max-width: 1100px){
  .jssorLayout,
  .sliders{
    height:500px;
  }

  /* .index-setting-cover{
    height:400px;
    min-height:400px;
  } */

}

jquery

jQuery(document).ready(function ($) {

 var jssor_1_SlideoTransitions = [
   [{b:-1,d:1,o:-0.7}],
   [{b:900,d:2000,x:-379,e:{x:7}}],
   [{b:900,d:2000,x:-379,e:{x:7}}],
   [{b:-1,d:1,o:-1,sX:2,sY:2},{b:0,d:900,x:-171,y:-341,o:1,sX:-2,sY:-2,e:{x:3,y:3,sX:3,sY:3}},{b:900,d:1600,x:-283,o:-1,e:{x:16}}]
 ];

 var jssor_1_options = {
   $AutoPlay: 1,
   $SlideDuration: 800,
   $SlideEasing: $Jease$.$OutQuint,
   $CaptionSliderOptions: {
     $Class: $JssorCaptionSlideo$,
     $Transitions: jssor_1_SlideoTransitions
   },
   $ArrowNavigatorOptions: {
     $Class: $JssorArrowNavigator$
   },
   $BulletNavigatorOptions: {
     $Class: $JssorBulletNavigator$
   }
 };

 var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

 var MAX_WIDTH = 3000;

 function ScaleSlider() {
   var containerElement = jssor_1_slider.$Elmt.parentNode;
   var containerWidth = containerElement.clientWidth;

   if (containerWidth) {

       var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

       jssor_1_slider.$ScaleWidth(expectedWidth);
   }else{
       window.setTimeout(ScaleSlider, 30);
   }
 }

  ScaleSlider();

  $(window).bind("load", ScaleSlider);
  $(window).bind("resize", ScaleSlider);
  $(window).bind("orientationchange", ScaleSlider);

});

<div id="jssor_1" class="jssorLayout">
      <div data-u="slides" class="sliders">

        <? while ($row = mysqli_fetch_array($setting_cover_data)){?>
          <div data-p="225.00">
            <img data-u="image" class="index-setting-cover" src="<?=$row['icon'];?>" onclick="window.open('<?=$row['url'];?>');"/>
          </div>
        <?}?>

      </div>

      <div data-u="navigator" class="jssorb032 bullet" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
        <div data-u="prototype" class="i prototype">
          <svg viewbox="0 0 16000 16000" class="bulletdisplay">
            <circle class="b" cx="8000" cy="8000" r="5800"></circle>
          </svg>
        </div>
      </div>

      <div data-u="arrowleft" class="jssora051" style="width:65px;height:65px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
          <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
        </svg>
      </div>
      <div data-u="arrowright" class="jssora051" style="width:65px;height:65px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
        <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
          <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
        </svg>
      </div>

    </div>

我的目的只是想讓他當在手機版的時候，高度我也可以自己調整
我現在預設高度 500px ，改了之後電腦版有用，但是到手機版他又會強制的比例高度
就像：height: 153.846px;
但我想實現的是手機版高度我一樣也可以設置......
第一次遇到一個沒辦法調固定高度的，豈有此理

從demo就可以用谷歌瀏覽器調整了
我怎麼調他就是依照比例實現高度

Answer 1

你把jQuery脚本中的这几行删除就可以了

  ScaleSlider();

  $(window).bind("load", ScaleSlider);
  $(window).bind("resize", ScaleSlider);
  $(window).bind("orientationchange", ScaleSlider);