用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器?急!!!
如果是个背景图的话,
定义一个div,高100%,宽100%,里面放个img
<div class='bg'>
<img src="data:images/bg.jpg" alt="">
</div> html,body{overflow: hidden;}
.bg{width: 100%;height: 100%;top:0;z-index: -1; position: absolute;}
.bg img{display: block;outline: none;border:0;height: 100%;width: 100%;}
用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器?急!!!的更多相关文章
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)
默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...
- 关于web页自动适配屏幕大小
一.先了解下html5的viewport使用 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...
- CSS Sprite小图片自动合并工具
css-sprite是将css样式中零星的小图标,小图片合并成大图显示,这样能减小服务器并发连接数,减小服务器负载和带宽使用,有很高的实用价值.这里介绍一些自动合并图片并生成样式的工具. NodeJS ...
- CSS小技巧-图片自动缩放
css的一个重要属性:max-width min-width 示例: <div width="500" height="259"><p> ...
- iframe适应屏幕大小,隐藏滚动条,移动端
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- VirtualBox设置自动适应屏幕
设备 --> 安装增强功能 等待安装完成,就能自动适应屏幕大小了
- Android官方提供的支持不同屏幕大小的全部方法
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8830286 原文地址为:http://developer.android.com/ ...
- 移动开发:Android官方提供的支持不同屏幕大小的全部方法
转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/8830286 原文地址为:http://developer.android.com/ ...
- Android官方提供的支持不同屏幕大小的全部方法(转)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8830286 原文地址为:http://developer.android.com/ ...
随机推荐
- From 7.8 To 7.14
From 7.8 To 7.14 大纲 学科 英语的话每天早上背单词, 争取每天做一篇完型, 一篇阅读, 一篇短文填空, 一篇改错, 一篇七选五??? 似乎太多了, 先试一下吧 语文的话, 尝试翻译一 ...
- Spring Boot学习笔记(1)
@SpringBootApplication用于注解Spring启动类,如下所示 @SpringBootApplication public class Application { public st ...
- React 番外篇
小技巧:如果我们想了解一门技术,不知道如何学习,那就在 BOSS 直聘上,来看看对这门技术的要求 这篇给大家讲的是 React 1.0 的初始版本,仅仅是让大家有个了解,毕竟回顾历史,我们才能找到他最 ...
- RN在Mac环境下开发环境搭建
1.推荐使用Homebrew来安装 Node 和 Watchman.在命令行中执行下列命令安装: brew install node brew install watchman 如果你已经安装了 No ...
- 详解nohup和& 区别
nohup 一.[解释] 不挂断地运行命令.no hangup的缩写,意即“不挂断”.一般理解&记住一个命令最简单的方法是记住它是什么缩写,就自然理解了这个命令.nohup运行由 Comman ...
- flask 学习 (五)
之前照着书去做的时候经常出现一些小问题,由于对于flask核心内容还不甚了解,我觉定先从更简单的做起,再根据别的需要对搭建的网站进行扩展. 上网找了一下,发现这位http://zhanghonglun ...
- SOA简介
1.你可以把SOA理解为一种概念,总的来说就是面向服务的设计. 这个概念简单来理解就是把之前所谓的模块划分做成服务. 比如之前的日志模块,需要引用你的dll,调用你的写日志方法来写日志.这样当有多个系 ...
- 网络分析:WireShark
安装 WireShark 官网 过滤器 类别 显示过滤器模式 捕获过滤器模式 逻辑表达式 and:&& or:|| 成组:() 过滤实例 仅监听某域名 http.host == &qu ...
- sh脚本实战
做了什么东西还是要尽快移动到博客上,不然回头看自己写的东西已经看不懂了... 凭着回忆+搜资料,把当初写sh脚本的过程写上来. 首先新建一个.sh文件,用vim就可以 在sh的第一行,写上 #!/bi ...
- flex与inline-flex
flex: 将对象作为弹性伸缩盒显示 inline-flex:将对象作为内联块级弹性伸缩盒显示 两者都是使子元素们弹性布局,但是如果是flex,父元素的尺寸不由子元素尺寸动态调整,不设置时默认是100 ...