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％宽度瓦特/隐藏溢出

回答

相关问题