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的属性
接近 2 年之前 回复
Hikari10086
Hikari10086 最上面的,目的是用background添加bg图片,background: url("images/header.gif") no-repeat;
接近 2 年之前 回复
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
接近 2 年之前 回复
waterhexuan
waterhexuan   2016.09.08 23:10

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

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

可以在IMG里调整图片大小

wenzhu0_0
wenzhu0_0   2016.09.09 16:50
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
用background-size实现 背景图片自适应浏览器大小,但不变形
很多flash站都用到了一张背景图,然后根据浏览器大小自动缩放,但图片不变形。 在CSS3中,有属性: background-size: cover;  //只支持IE9+ -webkit-background-size: cover; //webkit核心 -moz-background-size: cover; //FF核心 -o-background-size: cover; //
修改背景图片居中并自适应宽度的css
BODY {background-image: URL(photo/picture1.jpg);background-position: center;background-repeat: no-repeat;background-attachment: fixed;}-->
background-size设置背景图片自适应 在ie8下失效的问题
遇到的问题是 :有一个div ,div用绿色框体现。然后通过js控制框的大小,实现动态的改变div的大小。 (放大缩小窗口,div跟随变大变小。) 设置了div的css属性  background-image:url(http://i1.piimg.com/1949/c777d079f3fb68ec.png); background-size:cover; 通过浏览器使用发现,div框
如何实现背景图片自适应td大小
有一个颜色渐变的竖条图片bg_img.jpg,用作一个 的背景图片。 This is the content 现在的问题是 1. 当 里面的内容很短时,背景色只显示渐变色的部分 2. 当 里面的内容很长时,有些部分又没有了背景色。如果设置repeat-y,背景又很难看。 如何实现背景图片的高度根据 高度的大小自动伸缩,始终都能显示全部的渐变色? 请指教,谢谢解决方法:1、用
背景图片如何自适应屏幕
自己比较头疼的问题,网上搜了好多资料,大概整理了一下 1. 直接设置CSS样式达到目的    在以上代码中,background-size: cover;是对背景图进行等比例拉伸,仍然存在图片显示不完全的问题。       background-size: 100% 100%;是对背景图的宽拉伸至di
CSS中背景图片位置属性background-position
该属性用来定义元素背景图片的起始位置,在背景图片的背景图片位置属性中,可以使用两种属性值,一种为长度单位,包括长度值 和百分比值;另一种为指定值,包括top, center, bottom, left, righ等,其语法结构如下:     background-position: length | percent | top | center | bottom | left | right
CSS中背景的综合属性background
背景的综合属性(background)用来同时定义元素背景的各种显示属性,在实际应用CSS的过程中,通常使用背景的综合属性一次性 定义所有的背景属性。    background: background-image background-repeat  background-position background-color background-attachment   在背景的综合属性中
css background-image 自适应宽高
最近接手前端页面,让给调样式。哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一。 页面上有五个导航栏,是按百分比设置的,让我搞个背景图,点击某一导航栏的时候,背景改变,BUT,给我的背景图是一张有着固定大小的图片,放上去之后,各种不适应,不和谐,后来就想到如果能让背景图自适应导航栏的
background 背景属性的简写
通常使用background 属性 都是如下写法: background: url(../images/stock_taking/branch.png) no-repeat right  bottom ; 最近一个在做一个项目发现 最后的两个position属性值 还可以进行微调; 例如:background: url(../images/stock_taking/branch.
body背景图片自适应浏览器高度
<br />CSS代码:<br />body { background: #FFF url(img/bg.gif) repeat-y center top; } <br />如果网页内容较少,body的背景图片只占了浏览器的高度的一部分,很难看,现给body加个最小高度:<br />body { background:#FFF url(img/bg.gif) repeat-y center top; min-heigth:min-height:100%; height:auto !imp