jQuery.Cycle 100% 宽度 w/隐藏溢出答案

【问题标题】：jQuery.Cycle 100% Width w/ Hidden OverflowjQuery.Cycle 100% 宽度 w/隐藏溢出
【发布时间】：2012-10-10 18:29:29
【问题描述】：

我使用 jQuery.Cycle 创建了一个图像轮播，我希望宽度随浏览器大小 (100%) 缩放，但我希望将高度限制为 500 像素高的 div。

我希望图像从中心点按比例缩放。需要隐藏 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

现在图像正在拉伸浏览器的宽度，但不成比例。

【问题讨论】：

标签： jquery scaling cycle jquery-cycle

【解决方案1】：

如果您希望图像按比例缩放并与中心对齐，您应该设置 height: auto; 并使用 text-align: center;

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

这将从图像底部“裁剪”。

【讨论】：