jQuery.Cycle 100% ширины со скрытым переполнением

Я создал карусель изображений с помощью jQuery.Cycle, я хочу, чтобы ширина масштабировалась с размером браузера (100%), но я хочу, чтобы высота была ограничена высоким div высотой 500 пикселей.

Я хотел бы, чтобы изображение масштабировалось от центральной точки и масштабировалось пропорционально. Переполнение изображения внутри 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
person Black Bird    schedule 10.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы изображения масштабировались пропорционально и выравнивались по центру, установите height: auto; и центрируйте изображения с помощью text-align: center;

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

Это «обрежет» нижнюю часть изображений.

person castillo.io    schedule 10.10.2012