CSS溢出：隐藏不起作用

Question

I was tryed to create a slider and the slider is working but only one part is not working .

" overflow:hidden " This part is not working

Please tell me what is issue on my code . I will update this part .

This is my HTML:

<!-- Slider --><div class="slider-main">
<!-- <div class="container site-test_1"> -->
    <img id="slider-imge1" class="img-responsive" src="images/slider-images/slide_image-001.jpg" alt="Please wait..."/>
      <img id="slider-imge2" class="img-responsive" src="images/slider-images/slide_image-002.jpg" alt="Please wait..."/>
      <img id="slider-imge3" class="img-responsive" src="images/slider-images/slide_image-003.jpg" alt="Please wait..."/>
      <img id="slider-imge4" class="img-responsive" src="images/slider-images/slide_image-004.jpg" alt="Please wait..."/>
      <img id="slider-imge5" class="img-responsive" src="images/slider-images/slide_image-005.jpg" alt="Please wait..."/>
<!-- </div> -->
</div> <!-- End Slider -->

This is my CSS part:

.slider-main{
    width:100%;
    /* height:505px; */
    height:auto;
    overflow:hidden !important;
    position:relative;
    z-index:1;
}


.slider-main img{
            width:100%;
            max-height:500px;
            overflow:hidden !important;
 }

Answer 1

Try putting the max-height: 500px on the .slider-main instead:

.slider-main {
    max-height: 500px;
}

Answer 2

I think Your max-height is bigger than slider-main div.

Read details: http://www.w3schools.com/cssref/pr_pos_overflow.asp