jQuery.Cycle 100％寬度瓦特/隱藏溢出

我已經創建了一個使用jQuery.Cycle的圖像輪播，我希望寬度與瀏覽器大小（100％）成比例，但我希望高度被限制爲500px高分。jQuery.Cycle 100％寬度瓦特/隱藏溢出

我希望圖像從中心點縮放，並按比例縮放。需要隱藏div內圖像的溢出（即裁剪圖像）。

#slideshow { 
    margin: 0 auto; 
    width:100% !important; 
    height:500px; 
    z-index: 1; 
    position: relative; 
    overflow: hidden; 
} 
#slideshow img{ 
    margin: 0 auto; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow: hidden; 
}

HTML

<div id="slideshow">  
     <div class="ss2_wrapper"> 
     <a href="#" class="slideshow_prev"><span>Previous</span></a> 
     <a href="#" class="slideshow_next"><span>Next</span></a> 
     <div id="slideshow_2" class="slideshow">     
      <div class="slideshow_item"> 
       <div class="image"><a href="#"><img src="images/HomePage/ban1.jpg" alt="photo 2" /></a></div> 
      </div>        
      <div class="slideshow_item"> 
       <div class="image"><a href="#"><img src="images/HomePage/ban2.jpg" alt="photo 3" /></a></div> 
      </div>    
      <div class="slideshow_item"> 
       <div class="image"><a href="#"><img src="images/HomePage/ban3.jpg" alt="photo 1" /></a></div> 
      </div>   
      <div class="slideshow_item"> 
       <div class="image"><a href="#"><img src="images/HomePage/ban4.jpg" alt="photo 4" /></a></div> 
      </div>    
     </div> <!-- slideshow_2 --> 
    </div><!-- ss2_wrapper -->  
</div><!-- slideshow -->

頁面位於：http://samaradionne.com/euro

眼下圖像被拉伸瀏覽器的寬度，但沒有成比例。

來源

2012-10-10 Black Bird

如果您希望圖像按比例縮放並與中心對齊，則應設置爲height：auto;並使用text-align：center;

#slideshow img { 
    margin: 0 auto; 
    width: 100%; 
    height: auto; 
    display: block; 
    overflow: hidden; 
    text-align: center; 
}

這將從圖像的底部「裁剪」。

來源

2012-10-10 18:37:54

完美！謝謝。 –

不客氣。 –

jQuery.Cycle 100％寬度瓦特/隱藏溢出

回答

相關問題