javascript - 等比例缩放以下横幅banner中的图片，请问有哪些比较好的方法？

Question

<p 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>
</p>

等比例缩放以下横幅banner中的图片，请问有哪些比较好的方法？

Answer 1

等比例，首先需要一个比例值，如：4:3 = 3/4 = 0.75。你还是需要给图片添加一个包裹，然后给这个包裹写样式就可以了。

<p class="img-scale img-scale-4-3">
    <img src="*.jpg" alt="" />
</p>

然后，使用绝对定位和相对定位：

.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>

修改后可实现全屏或固定尺寸的幻灯片。

Answer 2

img
{
width:100%;
height:auto;
}

这样写是等比里缩放的。或者

img
{
width:x;//图片的宽度
height:auto;
}