Hikari10086
十进制Hikari
采纳率100%
2016-09-08 14:36

css的background属性,背景图片太大无法适应屏幕显示

3
已采纳

psd文档
用于bg的图片
浏览器打开后
在练习仅用html+css布局时,裁剪下的图片像素太高,css设置了width:100% auto;
background: url("images/header.gif") no-repeat;浏览器显示的结果如图。
问:请问各位前辈怎样才能设置图片的大小适应屏幕呢,除了css3的background-size:100%.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • qq_29594393 当作看不见 5年前

    试一下这个

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #bg_img{
            width: 100%;
            height: 100%;
            position: fixed;
        }
        </style>
        <body>
            <img src="1.jpg" id="bg_img"/>
    
        </body>  
    
    点赞 评论 复制链接分享
  • qq_29594393 当作看不见 5年前

    用jquery控制图片大小
    虽然很low ,但是能实现效果

      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
        $(function(){
            $("#bg_img").css({
                    "height":window.innerHeight+"px",
                    "width":window.innerWidth+"px"
                })
            $(window).resize(function(){
                $("#bg_img").css({
                    "height":window.innerHeight+"px",
                    "width":window.innerWidth+"px"
                })
            })  
        })
        </script>
        </head>  
        <style type="text/css">
        #bg_img{
            position: fixed;
            top: 0;
            left: 0;
        }
        </style>
        <body>
            <img src="1.jpg" id="bg_img"/>
    
        </body>  
    
    点赞 1 评论 复制链接分享
  • wenzhu0_0 wenzhu0_0 5年前
    点赞 评论 复制链接分享
  • WYJAVAC 黑洞小BUG 5年前

    可以在IMG里调整图片大小

    点赞 评论 复制链接分享
  • waterhexuan 编天码地 5年前

    你只考虑用div 不考虑用img吗

    点赞 评论 复制链接分享

相关推荐