图像滑块的响应式设计不如预期

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