<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li style="position: absolute; left: 0px; top: 0px; display: none;"><a href="javascript:;" class="img_1"><img src="./O2O B2C 站点 _ 主页_files/saved_resource(8)" alt="1 slide"></a></li>
<li style="position: absolute; left: 0px; top: 0px; display: none;"><a href="javascript:;" class="img_1"><img src="./O2O B2C 站点 _ 主页_files/saved_resource(9)" alt="1 slide"></a></li>
<li style="position: absolute; left: 0px; top: 0px; display: list-item;"><a href="javascript:;" class="img_1"><img src="./O2O B2C 站点 _ 主页_files/saved_resource(10)" alt="1 slide"></a></li>
<li style="position: absolute; left: 0px; top: 0px; display: none;"><a href="javascript:;" class="img_1"><img src="./O2O B2C 站点 _ 主页_files/saved_resource(11)" alt="1 slide"></a></li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging"><li class=""><a></a></li><li class=""><a></a></li><li class="active"><a></a></li><li class=""><a></a></li></ol>
</div>
等比例缩放以下横幅banner中的图片,请问有哪些比较好的方法?
img
{
width:100%;
height:auto;
}
这样写是等比里缩放的。或者
img
{
width:x;//图片的宽度
height:auto;
}
等比例,首先需要一个比例值,如:4:3 = 3/4 = 0.75。你还是需要给图片添加一个包裹,然后给这个包裹写样式就可以了。
<div class="img-scale img-scale-4-3">
<img src="*.jpg" alt="" />
</div>
然后,使用绝对定位和相对定位:
.img-scale {
position: relative;
font-size: 0; /* 防止图片底部出现空白 */
height: 0; /* 此处的高度是一个比例关系 */
width: 100%; /* 宽度是固定的,而高度是百分比的,因此可实现自适应 */
}
.img-scale.img-scale-4-3 {
padding-bottom: 75%; /* 宽度100% + 高度 75% = 4:3关系 */
}
.img-scale img {
position: absolute;
left: 0; /* 需要完整填充到父容器 */
top: 0;
height: 100%;
width: 100%;
}
其他比例关系也是类似的计算,如:.img-scale-16-9
等。
你这个实例的代码可以这样调整:
<li><!--这是条目容器,其高度是内部的span‘撑开’的-->
<a href="javascript:;" class="img_1"><!--这是点击区域,通常为100%-->
<span class="img-scale img-scale-4-3"><!--这是显示区域,可为960+,配合max-width实现自适应-->
<img src="***" alt="" />
</span>
</a>
</li>
修改后可实现全屏或固定尺寸的幻灯片。