スライダーの画像をレスポンシブさせたい

####ウィンドウサイズを変えるとスライダーの画像が小さくなってしまう
ウィンドウを極端にサイズ変更してもスライダー画像の大きさは全体との比率を保ったままにしたいです
しかし現状ですとウィンドウサイズを変更するとスライダーの画像がどんどん小さくなってしまい
全体との比率を保っているようにも見えません

解決方法がおわかりの方がいらっしゃいましたらどうかご教示お願い致します

html
1<div class="slide_show">
2
3    <div id="loopslider">
4      <ul>
5        <li><img src="slide01.png" alt="" /></li>
6        <li><img src="slide02.png" alt="" /></li>
7        <li><img src="slide03.png" alt="" /></li>
8        <li><img src="slide04.png" alt="" /></li>
9        <li><img src="slide05.png" alt="" /></li>
10        <li><img src="slide06.png" alt="" /></li>
11      </ul>
12    </div>
13  </div>

CSS
1.slide_show {
2  background: url("point03.jpg")no-repeat center top;
3  background-size: 100%;
4  width: 1000px;
5  height: 811px;
6  margin: auto;
7  max-width: 100%;
8  max-height: 79vw;
9}
10
11#loopslider {
12  margin: 0 auto;
13  width: 80%;
14  height: 20vw;
15  text-align: left;
16  position: relative;
17  overflow: hidden;
18  top: 41%;
19}
20
21#loopslider ul {
22  height: 100vw;
23  float: left;
24  display: inline;
25  overflow: hidden;
26  position: relative;
27}
28
29#loopslider ul li {
30  width: 10vw;
31  height: 20vw;
32  float: left;
33  display: inline;
34  overflow: hidden;
35}
36
37#loopslider ul:after {
38  content: ".";
39  height: 10vw;  
40  clear: both;
41  display: block;
42  visibility: hidden;
43}
44
45#loopslider ul {
46  display: inline-block;
47  overflow: hidden;
48}

javascript
1<script>
2  $(function() {
3    $('#loopslider').each(function() {
4      var loopsliderWidth = $(this).width();
5      var loopsliderHeight = $(this).height();
6      $(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');
7
8      var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
9      var listCount = $('#loopslider_wrap').children('ul').children('li').length;
10
11      var loopWidth = (listWidth) * (listCount);
12
13      $('#loopslider_wrap').css({
14        top: '0',
15        left: '0',
16        width: ((loopWidth) * 2),
17        height: (loopsliderHeight),
18        overflow: 'hidden',
19        position: 'absolute'
20      });
21
22
23      loopsliderPosition();
24
25      function loopsliderPosition() {
26        $('#loopslider_wrap').css({
27          left: '0'
28        });
29        $('#loopslider_wrap').stop().animate({
30          left: '-' + (loopWidth) + 'px'
31        }, 15000, 'linear');
32        setTimeout(function() {
33          loopsliderPosition();
34        }, 15000);
35      };
36
37      $('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
38    });
39  });
40</script>

試してみた事

CSSの#loopsliderの部分や、ulやliに

max-width:100%

上記を入れましたが状況何も変わらずでした。
また、下記を足しても変わらずでした

#looplider li {
 width: 100%;
 max-width: 20vw;
}

#looplider img {
 width: 100%;
 max-width: 20vw;
}

書籍やWebで調べても原因や方法と結び付かず解決出来ません
お時間とらせてしまうのは恐縮なのですが、わかる方いらっしゃいましたらどうかご回答お願い致します

Lhankor_Mhy

2020/06/25 07:00

こんにちは。「全体との比率」について、もう少し詳しくお願いします。たとえば、1000×4000の画面と、4000×1000の画面について、スライダーのサイズを例示していただけますか？

i0k62

2020/06/26 02:18 編集

こんにちは！前回もご対応頂き有り難う御座います！またこのスライダー問題で恥ずかしい限りなのですが、、、「全体の比率」のイメージとしては「％表示」という言い方が最も近いかもしれませんウィンドウサイズが変わっても３０％なら３０％の表示のまま、といった状態が理想ですしかし現状、思いつくコードを入力しても何も変化なく解消法も見つかりません何かひらめきましたら是非またお手隙の際に御助力頂きたいです宜しくお願い致します

Lhankor_Mhy

2020/06/27 01:13

30%とは、「何のサイズ」が「何に対して」30%なのですか？たとえば、1000×4000の画面と、4000×1000の画面について、スライダーのサイズを例示していただけますか？