ブラウザのサイズが

Question

のJavascriptスライドショーをどのようにスケールするのですか？Javascript/jQueryでこの小さな自動スライドショーをやったことがあります。それは本当にうまく動作しますが、画面サイズでどのように拡大縮小するのか把握することができません。現在、1920x1080に最適化されています。

この値（document.body.style.width）を運のないwidth変数に割り当てようとしましたが、ピクセルではなく画像のパーセンテージを試してみました。役立たず。誰もが私はこれが（再び、私はそれがブラウザのウィンドウに合わせて拡張する必要があります）言うのです成し遂げるかもしれない方法のアイデアを持っている場合

することは、とにかく、ここでコードがあります：

<div class="slider"> 
    <ul class="slides"> 
     <li class="slide"><img src="index/showcase.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic4.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic3.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic5.png" alt="#"/></li> 
     <li class="slide"><img src="index/pic6.png" alt="#"/></li> 
    </ul> 
    </div> 

    .slider { 
    width: 1920px; 
    height: 780px; 
    overflow: hidden; 
    } 

    .slider .slides { 
    display: block; 
    width: 9600px; 
    height: 780px; 
    margin: 0; 
    padding: 0; 
    } 

.slider .slide { 
float: left; 
list-style-type: none; 
width: 1920px; 
height: 780px; 
} 




    <script type="text/javascript"> 
     var myInterval = setInterval(function() { 
     console.log(new Date()); 
     }, 1000); 
     </script> 

    <script type="text/javascript"> 
    $(function() { 

    //configuration 
    var width = 1920; 
    var animationSpeed = 1000; 
    var pause = 4000; 
    var currentSlide = 1; 

    //cache DOM 
    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('.slides'); 
    var $slides = $slideContainer.find('.slide'); 

    var interval; 

    function startSlider() { 
     interval = setInterval(function() { 
     $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, 
    function(){ 
      currentSlide++; 
      if (currentSlide === $slides.length) { 
      currentSlide = 1; 
      $slideContainer.css('margin-left', 0); 
     } 
     }); 
    }, pause); 
    }   
    // function stopSlider() { 
    // clearInterval(interval); 
    //} 

    //$slider.on('mouseenter', startSlider).on('mouseleave', startSlider); 

    startSlider(); 
}); 
</script> 

Answer 1

VWとVHは何もありあなたは後です。幅：20％または幅：550pxの代わりに、幅：100vwをビューポートの幅の100％にします（vhはビューポートの高さです）。ビューポートのサイズが変更されると、サイズが変更されます。