如何獲取縮略圖圖像以占據縮略圖的整個空間？

Question

如何使縮略圖中的圖像占據縮略圖的整個空間，以使覆蓋div（“ 11月”）和slideToggle div（“ STEM中的女性”）不突出？

我使用jQuery和Bootstrap。 當用戶將鼠標懸停在圖像上時，slideToggle會向上滑動，然后在鼠標離開時消失。 但這不適合圖像； 11月也不會覆蓋。

 $(document).ready(function () { $('.thumbnail').hover(function () { $('.slider', this).slideToggle('fast'); }); //$('.thumbnail').hover(function () { // $('.slider', this).animate({ // opacity: 0.75, // height: "toggle" // }, 750, function () { // //Animation complete. // }); //}); }); 

 .womens-overlay { position: absolute; background: rgba(0,0,0,1); top: 0; right: 0; padding: 2%; width: 35%; color: #FFFFFF; } /*Removes the automatic thumbnail frames.*/ .thumbnail { border: none; box-shadow: none; float: left; position: relative; margin: 5px; color: #333; } .thumbnail img { max-height: 100%; max-width: 100%; } .thumbnail .slider { border: none; box-shadow: none; display: none; opacity: 0.8; background: #D2D6E2; width: 100%; position: absolute; bottom:4px; padding: 5px; } .slider { position: absolute; padding-top: 0%; } 

  <div class="col-sm-6 col-md-4"> <div class="image-box"> <div class="thumbnail"> <img src="Images/celebrating-women-in-stem.jpeg" /> <div class="womens-overlay"> <h3>November</h3> </div> <div class="slider"> <h2>Women & Girls in STEM Month</h2> <h3>EVENT</h3> <p>This November, we are celebrating women and girls in STEM. Come join us!</p> <button type="button" class="btn btn-primary">Learn More</button> </div> </div> </div> </div> 

Answer 1

添加每個功能，以便可以在多個縮略圖上使用。 然后獲取縮略圖的高度，並將.slider高度設置為相同。

$(document).ready(function () {
     $('.thumbnail').each(function(){
           // get height
           var height = $(this).height();
           // set slider height
           $(this).children('.slider').css({'height':height+'px'});
           $(this).hover(function () {
                $(this).children('.slider').slideToggle('fast');
           });
      });
});

然后在.thumbnail上設置overflow：hidden

.thumbnail {
    border: none;
    box-shadow: none;
    float: left;
    position: relative;
    margin: 5px;
    color: #333;
    overflow: hidden;
}  

小提琴-https: //fiddle.jshell.net/Jim_Miraidev/xrevsesq/