前端开发图片自适应屏幕

前端开发网站大全 网站前端开发代码 网站开发前端

适合满屏图片,对于宽高不协调等比例缩进,一直都上下左右居中。

代码片段 1

<!DOCTYPE html>
<html lang=”zh_cn”>
<head>
    <meta charset=”UTF-8″>
    <title>图片自适应屏幕</title>
</head>
<style>
    body,
    img,
    div {
        margin: 0;
        padding: 0;
    }
    img {
        display: block;
        width: 100%;
    }
    .img {
        position: absolute;
    }
</style>
<script src=”http://cdn.w3cfuns.com/resource/js/jquery-1.10.2.min.js”></script>
<script>
    $(function () {
        var $pages = $(‘.nav’)
        var wid = $(window).width();
        var hei = $(window).height();
        var $pageStages = $(“.img”);
        var fixWinHW = function () {
            hei = $(window).height();
            wid = $(window).width();
        }
        var fixPageHeight = function () {
            $pages.height(hei);
        }
        var fixPageBg = function () {
            $pageStages.each(function () {
                var win = wid / hei;
                var nva = 1659 / 960;
                if (win > nva) {
                    $(“.img”).css({ “width”: wid, “height”: wid / nva });
                    var tops = hei – $(“.img”).height();
                    $(“.img”).css({ “top”: tops / 2, “left”: 0 });
                } else if (win < nva) {
                    $(“.img”).css({ “width”: hei * nva, “height”: hei });
                    var lefts = wid – $(“.img”).width();
                    $(“.img”).css({ “top”: 0, “left”: lefts / 2 });
                } else {
                    $(“.img”).css({ ‘width’: wid, ‘height’: hei, ‘left’: 0, ‘top’: 0 });
                }
            });
        };
        $(window).on(‘resize’, function () {
            fixPageBg();
            fixPageHeight();
            fixWinHW();
        });
        fixPageBg();
        fixPageHeight();
        fixWinHW();
    })
</script>
<body>
    <div class=”nav” style=”position:relative; width:100%; overflow:hidden;”>
        <div class=”img”><img src=”http://www.mqjj.com/templets/spy/images/bg3.jpg”></div>
    </div>
</body>
</html>

前端开发网站知乎 web前端开发技术网站 网站前端开发面试题

» 本文来自:前端开发者 » 《前端开发图片自适应屏幕》
» 本文链接地址:https://www.rokub.com/5542.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!