导航页背景图片固定宽高比

前端入门

需求简介

有一个引导页背景是一张大图，我们现在需要固定这个图的宽高比与原图片一致，多余的部分进行裁决，如何实现呢？

参考纯 CSS 实现高度与宽度成比例的效果

将图片比例固定为1.77:1 ：

<div class="img-box">
    <div class="img-responsive">
        <img src="/static/wechat/images/countdown-bg1.jpg">
    </div>
</div>


.img-responsive{
    max-width: 100%;
    height: 0;
    padding-bottom: 177%;
    background-color: black;
    overflow: hidden;
}
.img-responsive img{
    width: 100%;
}

再利用js使用具体设备的高度来对多出的部分进行裁剪：

//重设窗口高度          
    var $h=$(window).outerHeight();
    $(".img-box").css({"max-height":$h+"px","overflow": "hidden"});