2 hikari10086 Hikari10086 于 2016.09.08 22:36 提问

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

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

5个回答

qq_29594393
qq_29594393   Ds   Rxr 2016.09.08 23:23
已采纳

试一下这个

<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
qq_29594393 回复Hikari10086: 条件太苛刻了,臣妾做不到啊,所有的方法的都试过了,还特意去看了一下,background的属性
大约一年之前 回复
Hikari10086
Hikari10086 最上面的,目的是用background添加bg图片,background: url("images/header.gif") no-repeat;
大约一年之前 回复
qq_29594393
qq_29594393   Ds   Rxr 2016.09.08 22:54

用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>  
Hikari10086
Hikari10086 谢谢,不过上面有说【仅用html+css布局】的情况,主要考虑用css怎么写,而且不用background-size
大约一年之前 回复
waterhexuan
waterhexuan   2016.09.08 23:10

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

waterhexuan
waterhexuan 回复十进制Hikari: 有些事情真的就是不可能的
大约一年之前 回复
Hikari10086
Hikari10086
大约一年之前 回复
WYJAVAC
WYJAVAC   2016.09.09 07:38

可以在IMG里调整图片大小

wenzhu0_0
wenzhu0_0   2016.09.09 16:50
Csdn user default icon
上传中...
上传图片
插入图片