我使用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
现在图像正在拉伸浏览器的宽度,但不是按比例缩放。
答案 0 :(得分:1)
如果您希望图像按比例缩放并与中心对齐,则应设置 height:auto; 并使用 text-align:center; <设置图像居中位置/ p>
#slideshow img {
margin: 0 auto;
width: 100%;
height: auto;
display: block;
overflow: hidden;
text-align: center;
}
这将&#34; crop&#34;从图像的底部。