ider.slider" rel=" nofollow noreferrer "> https://www.jssor.com/demos/f.

I found this
he adjusted the screen height proportionally
so if I turned it into a mobile version, he would become very small
I adjusted his div without any response

.

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:-sharpfff;}
.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:-sharpC9C9C9;fill-opacity:0.7;stroke:-sharpC9C9C9;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
.jssorb032 .i:hover .b {fill:-sharpfff;fill-opacity:.6;stroke:-sharpfff;stroke-opacity:.35;}
.jssorb032 .iav .b {fill:-sharpfff;fill-opacity:1;stroke:-sharpfff;stroke-opacity:.35;}
.jssorb032 .i.idn {opacity:.3;}

.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:-sharpfff;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>

my goal is just to let him adjust the height by himself when he is in the mobile version.
I am now at the default height 500px, and the revised version is useful, but when he gets the machine version, he will force the height
like: height: 153.846px;
but I want to realize the height of the manual version. I can also set the height.
for the first time, I have encountered a fixed height, but I can also set the height of the mobile version.
for the first time, I have encountered a fixed height, but I can also set the height of the mobile version.
I can also set the height of the manual version.
for the first time, I have encountered a manual version with a fixed height.

you can use Google explorer to modify
from demo.

how do I tell him how to achieve the height according to the proportion?