关于大背景图片随浏览器百分比缩放的问题

新手，此文为整理自己的疑惑。存在问题欢迎指正，多谢。

最近在写一个学校的引导页，背景图片1920*679。

以前写适应屏幕都是用100%写，所以这一次依然这样写了，但是这次却是一个有内容的背景图片，所以100%的方法导致logo等被压缩变形了。

后来又被要求，屏幕是100%的时候显示图片中间的内容部分，浏览器内容缩放后，整个背景显示出来，即两边隐藏的背景也显示出来，并且在屏幕正常的时候不能出现横向滚动条。

PS：是内容缩放，而不是屏幕缩放。

如下图，图1、图2所示：

图1：

图2：

开始，似乎跳入了一个死胡同，一直在纠结，怎样能让他整个充满屏幕，还不被压缩，显然，这并不切实际。

于是，就开始了各种跳坑：

开始把背景图片两边多余的裁掉了，截取了一部分跟屏幕大小正合适的部分，当然，这也是在自己欺骗自己，因为不需要换不同大小的显示屏，用不同的浏览器就会发现这是多么的不靠谱；

后来，又想，是否可以像媒体查询那样，写一段css或js，让它能够自由随着屏幕的大小切换不同的图片，因为个人js水平有限，不知道怎么写，不知道有没有这样的方法，如果有的话，还望大家不吝赐教，在这里多谢了

查到一个detectZoom 函数，此为网址

http://www.jb51.net/article/55753.htm

再后来，想到了background-position：center；

但是因为设置的问题，导致一缩放，内容就错位了，，把wrapper-ydy设置的position：relative；其他内容区的div都设置的absolute，思维就一直没转出来，一直在想具体内容区要怎么定位，问了各路网友，又知道了一个，background-size:cover，设置了，也没有效果。

最后，同学帮着看出了问题：

在body上设置relative、居中，div设置relative、居中

以下为代码：

html:

<!DOCTYPE html>
<!--[if lt IE 9]><html class="lte-ie8" lang="zh-CN"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="zh-CN"><!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <!-- 搜索引擎-->
    <link rel="stylesheet" href="css/ydy.css">
    <title></title>
</head>
<body>
<!--[if  IE 6]>
<div id="ie6-warning">
    您正在使用IE6或以IE6为内核的浏览器，可能导致本网站无法正常显示，建议您升级到更高版本。
    <a href="http://www.microsoft.com/china/windows/internet-explorer/"  target="_blank">点击下载</a>
    <a id="ie6-close" href="#">关闭</a>
</div>
<script>
    $body =$('body');
    $body.addClass('ie6');
    $('#ie6-close').click(function(){
        $body.removeClass('ie6');
        $('#ie6-warning').hide();
    })
</script>
<![endif]-->
<!--不同类型的页面用不同的类区分 wrapper-index（首页） wrapper-news（新闻页）  wrapper-more（更多页）  wrapper-channel（二级页）-->
<div class="wrapper-ydy">
    <div class="ydy-top">
        <p class="p1"><a href="#">English</a> </p>
        <p class="p0"><a href="#">英文简介</a> <a href="#"> 进入主页>></a> </p>
    </div>
    <div class="ydy-img">
        <div class="box">
            624*286
        </div>
    </div>
    <div class="ydy-nav">
        <span id="fljj"><a href="#">福林简介</a></span>
        <span id="fljz"><a href="#">福林剪纸</a></span>
        <span id="fldm"><a href="#">福林灯谜</a></span>
        <span id="flhy"><a href="#">福林海洋</a></span>
    </div>

</div>

</body>
</html>

css:

body{
    margin: 0 auto;
    text-align: center;
    padding: 0;
    position: relative;
}
a{
    text-decoration: none;
}

.wrapper-ydy{
    width: 100%;
    text-align: center;
    background-image: url("../images/yd/yd-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 679px;
    z-index: -99999;
}


.ydy-top{
    z-index: 1000;
    margin: 0 auto;
    /*background-color: #fffa62;*/
    width: 200px;
    position:relative;
    top: 9.9%;
    left: 12.8%;
}
.ydy-top p{
    margin: 0;
    /*background-color: #9dff77;*/
    width: 200px;
    height: 20px;
    padding-bottom: 5px;
}
.ydy-top .p0{
    margin-top: 0px;
    margin-left: -100px;
    width: 400px;
}
.ydy-top .p1 a{
   margin-left: -130px;
}

.ydy-top p  a{
    font-family: "Tahoma", "宋体";
    /*font-size: 14px;*/
    font-size: 0.875rem;
    color: black;
}
.ydy-top .p0  a{
    font-weight: bold;
    display: inline-block;
    color: black;
}



.ydy-img{
    margin: 0 auto;
    width: 640px;
    height: 289px;
    z-index: 100;
    /*background-color: palevioletred;*/
    position: relative;
    top:14.5%;
    left: -0.27%;
}
.ydy-img .box{
    width: 640px;
    height: 289px;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: yellow;*/
}


.ydy-nav{
    z-index: 100;
    margin: 0 auto;
    /*background-color: #ee9316;*/
    width: 540px;
    height: 48px;

    position: relative;
    top: 22.8%;
    left: 0%;
}

.ydy-nav span{
    display: inline-block;
    width: 44px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: #ff5cef;*/

}
.ydy-nav span a{
    font-family: "Microsoft Yahei";
    /*font-size: 16px;*/
    font-size: 1rem;
    color: #ffffff;
    font-weight: bolder;
    display: block;
    height: 30px;
    line-height: 20px;

}

#fljj{
    margin-left: 12px;
}
#fljz{
    margin-left: 167px;
}
#fldm{
    margin-left: 323px;
}
#flhy{
    margin-left: 477px;
}

更多相关文章

随机推荐