圖像滑塊的響應式設計不如預期

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 */ 
    } 
}