jQuery.Cycle 100% ширина със скрито преливане

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

Бих искал изображението да се мащабира от централната точка и да се мащабира пропорционално. Преливането на изображението в 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="/bg#" class="slideshow_prev"><span>Previous</span></a>
        <a href="/bg#" class="slideshow_next"><span>Next</span></a>
        <div id="slideshow_2" class="slideshow">                
            <div class="slideshow_item">
                <div class="image"><a href="/bg#"><img src="images/HomePage/ban1.jpg" alt="photo 2" /></a></div>
            </div>                              
            <div class="slideshow_item">
                <div class="image"><a href="/bg#"><img src="images/HomePage/ban2.jpg" alt="photo 3" /></a></div>
            </div>              
            <div class="slideshow_item">
                <div class="image"><a href="/bg#"><img src="images/HomePage/ban3.jpg" alt="photo 1" /></a></div>
            </div>          
            <div class="slideshow_item">
                <div class="image"><a href="/bg#"><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