イメージスライダのレスポンシブデザインが期待通りではない

Question

私はイメージスライダを作成しましたが、何らかの理由でブラウザのサイズを変更するとイメージが崩れ、幅が小さくなりすぎて高さが変わらないため、ここでは、ここで をどうするかにJSフィドルは次のとおりです。https://jsfiddle.net/gjaxfnn8/8/以下

はスライダーの画像は、通常で、ブラウザが

のサイズが変更されたときにそれがどのように見えますかあなたのスライダー画像の高さを変更するために

HTML

<section id="slider"> 
    <ul class="mySlide"> 
    <li><img src="images/slider1.png" alt="Slider image"></li> 
    <li><img src="images/slider2.png" alt="Slider image"></li> 
    <li><img src="images/slider3.png" alt="Slider image"></li> 
    <li><img src="images/slider4.png" alt="Slider image"></li> 
    </ul> 
<button class="prev">Back</button> 
<button class="next">Next</button> 
</section> 

はJavaScript

//http://imageslidermaker.com/blog/how-to-make-a-responsive-image-slider-using-jquery-and-css 
$(function() { 
//Variables 
    var ul = $("#slider ul"); 
    var slide_count = ul.children().length; // Count number of images 
    var sliderDuration = 500; //Animation duration 
    var slide_width_pc = 100.0/slide_count; //width of each slide (100%)/slide count (4) 
    var slide_index = 0; // Track first visible image 

    ul.find("li").each(function(indx) { 
    var left_percent = (slide_width_pc * indx) + "%"; // Insert width of slider depending on number of images 
    $(this).css({"left":left_percent}); 
    $(this).css({width:(100/slide_count) + "%"}); // Insert width of slider depending on number of image 
    }); 

    // Listen for click of prev button 
    $("#slider .prev").click(function() { 
    if(slide_index == 0){ //if user clicks previous on first image then, 
     slide_index = slide_count; // transition to final image 
    } 
    slide(slide_index - 1); // -1 = previous image 
    }); 

    // Listen for click of next button 
    $("#slider .next").click(function() { 
    if((slide_count-1) == slide_index){ //if user clicks nexxt on last image then, 
     slide_index = -1; // transition to first image (-1) 
    } 
    slide(slide_index + 1); // +1 = next image 
    }); 

    function slide(new_slide_index) { 
    var margin_left_pc = (new_slide_index * (-100)) + "%"; 
    ul.animate({"margin-left": margin_left_pc}, sliderDuration, function() { // slide image to the left of margin 

     slide_index = new_slide_index // update to new index when changed 

    }); 
    } 
}); 

CSS

#slider { 
    overflow: hidden; /* Hides images that are next or previous until button is pressed */ 
    height: 650px; /* Height of slider */ 
    position: relative; /* Position of slider */ 
} 

#slider ul { 
    position: absolute; /* Makes images not overlap*/ 
    width: 400%; /* Width of all images in slider */ 
    height: 100%; /* Height of all images in slider */ 
} 

#slider li { 
    position: absolute; 
    top: 0; /* Places slider from top */ 
    bottom: 0; /* Places slider from bottom */ 
} 

#slider li img { 
    width: 100%; /* Width of image in slider */ 
    min-height: 100%; /* Minimum height of image in slider */ 

} 

#slider button { 
    position: absolute; /* Moves button inside of the slider */ 
    border: none; /* Remove button border */ 
    top: 0; /* Button span from top down */ 
    bottom: 0; /* Button span from bottom up */ 
    width: 7%; /* Width of button */ 
    background-color: rgba(0, 0, 0, 0.3); /* Background colour of button (transparent grey) */ 
    color: #fff; /* Colour of button text (white) */ 
} 

#slider button.prev { 
    left: 0; /* Move button to left */ 
} 

#slider button.next { 
    right: 0; /* Move button to right */ 
} 

#slider button:hover, .slider button:active { /* If slider button is active and user hovers */ 
    opacity: 0.5; /* Decrease colour opacity by 0.5 */ 
} 

Answer 1

あなたは@mediaクエリを使用する必要があります。

などは：

@media (max-width:500px) { 
    #slider { 
     overflow: hidden; /* Hides images that are next or previous until button is pressed */ 
     height: 350px; /* Adjust your height of slider */ 
     position: relative; /* Position of slider */ 
    } 
}