文档章节

css 背景图不拉伸自适应屏幕大小

xiaoxin502
 xiaoxin502
发布于 2015/12/08 19:14
字数 377
阅读 3385
收藏 1

效果图

全屏:

背景图尺寸大于屏幕尺寸,背景图只显示跟屏幕一样大小内容

小屏时:

如效果图所示,图片并没有发生压缩、或者缩小比例,它只是显示跟屏幕尺寸大小的内容,至于如何控制缩小浏览器时图片的变化,可以使用css的

background-position:

属性来进行控制,它的部分可选参数值如下:

详细参数可自行查看api文档。

下面贴上代码

主要html代码:

<body>
        <div style="
             background: url('img/failure.jpg') no-repeat center center;
             width: 100%;
             height: 100%;
             position: fixed;
">
        </div>
</body>

使用position:fixed之后就可以通过设置width和height来控制div的宽高度了。

background: url('img/failure.jpg') no-repeat center center;
后面的no-repeat 表明图片文件不重复平铺,后面的center center表示当屏幕缩小时,图片在水平方向和垂直方向都居中显示。

页面的其他内容就可以全部都写在上面的div中了,不过这代码有些问题,因为最外层div已经使用了fix定位,已经脱离了文档流,如果有其他元素使用相对定位或者绝对定位会不会受到影响,我还没测试到。如果有更好的方法可以实现图片自适应屏幕的功能,请大家多多指教。




© 著作权归作者所有

共有 人打赏支持
xiaoxin502
粉丝 0
博文 4
码字总数 1730
作品 0
广州
浅谈Web自适应

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端...

数通畅联
2016/08/19
75
0
Android官方提供的支持不同屏幕大小的全部方法

本文将告诉你如何让你的应用程序支持各种不同屏幕大小,主要通过以下几种办法: 让你的布局能充分的自适应屏幕 根据屏幕的配置来加载合适的UI布局 确保正确的布局应用在正确的设备屏幕上 提供...

jdroid
2014/05/02
0
1
CSS3 border-image详解、应用及jQuery插件

一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅 Firefox3.5,chrome浏览器,Safari3+支持...

林文安
2012/05/31
0
0
HTML5 背景图片自适应屏幕的大小

在日常的开放中,经常会遇到有背景图片的时候,现在不同屏幕大小的手机又很多,如何让背景图片自适应屏幕的大小了。 在网上搜了很多方法,有的还不一定的能解决问题。如下办法,是我经常使用...

突然很想飞
2015/12/10
16.7K
0
制作android自适应屏幕大小的图片

常用的Drawable Resources主要有以下几种: 1、Bitmap File,一种位图(png或 jpg或 gif) 2、Nine-Patch File,一种可拉伸的自适应的png图片,以(9.png)为后缀名。 3、State List,一种以XML...

鉴客
2011/12/21
5.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
20分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
30分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
42分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
53分钟前
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
56分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部