jQuery.Cycle を使用して画像カルーセルを作成しました。幅をブラウザーのサイズ (100%) に合わせて拡大縮小したいのですが、高さを 500px の高い 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
現在、画像はブラウザの幅を拡大していますが、比例していません。