div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式
目录
零.问题描述和基本情况介绍
案例：
问题及疑问：
一.background-size:cover;和background-size:100%;的区别：
1.background-size:100%；
（1）div的高度足够的时候：
（2）div的高度不足够的时候：
（3）background-size:50%是什么效果：填充所在div的50%宽的区域
2.background-size:cover;
（1）当div的宽高比大于图片的宽高比时：
（2）当div的宽高比小于图片的宽高比时：
（3）当div的宽高比等于图片的宽高比时：
3.二者区别
二：通过设置背景图： background-image:url("");实现；这个主要是：background-size:cover;和background-size:100%;（这个很无奈，其实无法自适应）
三：另一种新的策略：把图片作为div的元素（而不是作为background-image）
三.1：使用标签，让图片作为div中的元素，对于两个边框图片来说
step1：使用标签，使得图片作为div中的元素：
三.2：使用标签，让图片作为div中的元素，对于中间那个需要充满整个屏幕的div
step1:使用标签，把图片作为div中的元素，而不是作为背景图
step2：使这个div充满整个屏幕（其实是div的父级的啦）
step3：div中的图片元素，根据div的宽度，百分比的显示（图片不会长宽比例不会变形）（第二种方式的核心内容）
三3：附录：第二种策略的示例代码：
零.问题描述和基本情况介绍
案例：
案例1：div手动设置大小，并不能自适应背景图的尺寸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例程序</title><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><div class="div0"><div class="div1"></div><div class="div2"></div></div>
</body>
</html>CSS：
.div0{background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");background-repeat:no-repeat;background-attachment:scroll;background-size:100%; /*图片完全充满div*/width:100%;height:10000px; /*疑问？：div的尺寸如何自适应背景图的尺寸*/}.div1{background-image:url("http://climg.mukewang.com/5a3383c70001f1b702240364.png");background-repeat:no-repeat; width:100px; /*疑问？：div的尺寸如何自适应背景图的尺寸*/height:200px;background-size:100%; /*图片完全充满div*/position:fixed;top:300px;left:5px; }.div2{background-image:url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png");background-repeat:no-repeat;width:100px; /*疑问？：div的尺寸如何自适应背景图的尺寸*/height:200px;background-size:100%; /*图片完全充满div*/position:fixed;top:300px;right:5px; } 问题及疑问：
上面案例中，div的尺寸都是手动设置的，并没有参考实际图片的尺寸，即我们不需要设置div的宽度和高度，实现div自适应图片的尺寸？
为了解答这个疑问，需要先了解background-size:cover;和background-size:100%;的区别；然后本博客会介绍一下两种方法来解决这个问题；
（PS：目前的解决方案，仅限于HTML和CSS，并没有JavaScript）
一.background-size:cover;和background-size:100%;的区别：
background-size:x%：
● x表示图片占据所在div的宽度的百分比；
● 图片的长宽比例不会变化，即使由于div太短而导致图片显示不全，图片的长宽比例也不会变化；
● 图片”宽度“上完全显示的，长度上能够显示全需要看div的长度够不够；
具体可以看下面的例子：
1.background-size:100%；
示例程序：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例程序</title><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><div class="div0"></div>
</body>
</html>（1）div的高度足够的时候：
示例1：
效果：
……………………………………………………
示例二：
效果：
示例三：
效果：
发现，当高度够的时候，background-size:100%就是完全适应div，等比的缩放完全填充所在的父div；
（2）div的高度不足够的时候：
示例1：
效果：
示例2：
效果：发现，background-size:100%图片长宽比例不变的情况下，完全填充div的宽度！！！！！！！！！！！！；自然能发生下图这种部分不显示的情况。
（3）background-size:50%是什么效果：填充所在div的50%宽的区域
效果：又一次印证background-size:50%：是根据宽度自适应的；
再如：
2.background-size:cover;
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法背景定位区域中。
为了便于演示，把图片截取成了300*200的图片，即此时图片的宽高比是 3:2。
（1）当div的宽高比大于图片的宽高比时：
示例1：
效果：宽度完全显示，高度有缺失
示例2：
效果：宽度完全显示，高度有缺失（而且比宽高比是2：1时缺的比例更高）
（2）当div的宽高比小于图片的宽高比时：
示例1：
效果：高度完全显示，宽度有缺失
示例2：高度完全显示，宽度有缺失（而且比宽高比是1：1的时候确实的比例更大）
效果：
（3）当div的宽高比等于图片的宽高比时：
示例1：
效果：
示例2：
效果：
3.二者区别
通过上面的示例发现，
background-size:100%;在任何时候都会优先适应宽度；
background-size:cover;是跨度和高度谁牛逼就适应谁；
二：通过设置背景图： background-image:url("");实现；这个主要是：background-size:cover;和background-size:100%;（这个很无奈，其实无法自适应）
通过background-size:cover;和background-size:100%;的性质可以发现，其并不能很好的完成背景图片的自适应；所以为了实现完美的显示的效果，目前只能把对应的长度设置的长一点，以使其能完全显示。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例程序</title><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><div class="div0"></div> <div class="div1"></div><div class="div2"></div>
</body>
</html>注意下面的四条注释：在不知道图片尺寸的情况下，只能尽量摸索着设置width和height，尽量让其的值合理些。。。。
.div0{background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");background-repeat:no-repeat;background-attachment:scroll;width:100%; /*对于占满整个屏幕的div0来说，通过width:100%;设置其宽度*/background-size:100%; height:3000px; /*对于占满整个屏幕的div0来说，只能把height设置的大一点，以防止显示不全*/}
.div1{background-image:url("http://climg.mukewang.com/5a3383c70001f1b702240364.png");background-repeat:no-repeat; width:100px; /*对于左侧边栏的div1来说，只能试着把width和height设置的合理一点*/height:200px;background-size:100%;position:fixed;top:300px;left:5px; }
.div2{background-image:url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png");background-repeat:no-repeat;width:100px; /*对于右侧边栏的div2来说，只能试着把width和height设置的合理一点*/height:200px;background-size:100%;position:fixed;top:300px;right:5px; } 三：另一种新的策略：把图片作为div的元素（而不是作为background-image）
三.1：使用<img>标签，让图片作为div中的元素，对于两个边框图片来说
不使用div的背景图设置，即不使用background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");这种给div设置背景图的方式实现上述效果：
而是：
step1：使用<img>标签，使得图片作为div中的元素：
此时，如果定义的div正好（纯属巧合）和div设置的尺寸吻合，那么就很完美：图片既没有溢出，div空间也没有多余：
如果div的尺寸设大了：
如果div的尺寸设小了：发生溢出
但无论如何，上面三个div尺寸设置大、小、正好的情况下，都可以实现那个效果；
三.2：使用<img>标签，让图片作为div中的元素，对于中间那个需要充满整个屏幕的div
step1:使用<img>标签，把图片作为div中的元素，而不是作为背景图
step2：使这个div充满整个屏幕（其实是div的父级的<body>啦）
step3：div中的图片元素，根据div的宽度，百分比的显示（图片不会长宽比例不会变形）（第二种方式的核心内容）
即图片的width:60%的这个60%参考的是所在div的宽度
示例1：
示例2：
示例3：
示例4：这个例子更能体现，img的width是针对其所在父div来说的，
三3：附录：第二种策略的示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例程序</title><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><div class="div1"><img class="img1" src="http://climg.mukewang.com/59c9f7ce0001839219034033.png"></div><div class="div2"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"></div><div class="div3"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"></div>
</body>
</html>.div1{width: 100%;
}
.img1{width: 100%;
}
.div2{background-color: red;width: 224px;height: 364px;position: fixed;top: 20%;left: 1%;
}
.div3{width: 224px;height: 364px;position: fixed;top: 20%;right: 1%;
}div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式相关推荐
- android 设置activity背景图片,给Activity设置背景颜色
为了使得错误提示更加显眼,再用Toast+振动效果之外考虑变换整个activity的背景颜色. 尝试一: activity并没像winform一样直接给个属性来设置,就想获取整个activity的la ...
- background-size 之 背景图的尺寸设置
目录 一:background-size参数取值 1.0 1.1 二:实例分析 2.1 参数分析 2.2 代码实例分析 引:background-size: 没有设置任何尺寸时使用图片本身的大小,宽度 ...
- Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
- java窗体背景图片_java 窗体设置背景图片问题 (附上登陆界面代码，我想加个背景图...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 java 窗体设置背景图片问题 (附上登陆界面代码,我想加个背景图片,求大神帮忙改改) package com.qx; import java.awt.D ...
- c语言编游戏怎么设置背景图,steam如何设置背景图片 steam个人背景图片设置教程...
看着steam好友的个人背景都设置得很好看,无论是游戏还是动漫二次元的个人背景,都给人一种很深的影响,是不是有点心动了呢?steam如何设置背景图片?下面小编带来了steam个人背景图片设置教程,希望 ...
- html中设置背景透明,css如何设置背景透明
css设置背景透明的方法:首先在[ ]标签创建[ ]标签和添加类:然后在[ 3.为div添加样式.在 标签后面创建一个 4.保存后使用浏览器查看.可以看到当透明度为由0.1修改为1时div背景由灰色变 ...
- CSS背景图片，文字设置背景
关于CSS里的背景图片 CSS背景 叠加背景图片: 背景图片尺寸: 文字设置背景: CSS背景 叠加背景图片: background-image 可以为一个元素添加多个背景,第一幅图片最靠近观看者 # ...
- html 页面宽度和背景颜色,CSS：设置背景颜色为窗口宽度的50％
旧版浏览器支持 如果旧的浏览器支持是必须的,所以你不能去使用多个背景或渐变,你可能要在备用的div元素上做这样的事情: #background { position: fixed; top: 0; l ...
- 怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
- java主界面设置背景图片_java 窗体设置背景图片问题?(附上登陆界面代码，我想加个背景图片，求大神帮忙改改)...
java 窗体设置背景图片问题?(附上登陆界面代码,我想加个背景图片,求大神帮忙改改) 关注:223 答案:4 mip版 解决时间 2021-01-26 22:09 提问者非莪莫属 2021-01 ...
最新文章
- 加入/ LINQ和Lambda的位置
- java中字节码_Java字节码浅析（三）
- Bootstrap 输入组
- Object.wait()与Object.notify()的用法
- 【CyberSecurityLearning 72】DC系列之DC-3渗透测试（Joomla）
- php中reset函数,PHP reset()函数
- jdbctypetimestamp_mysql之TIMESTAMP（时间戳）用法详解
- html5导出错误,JavaScript：toDataUrl()抛出“安全错误：可能无法导出受污染的画布”. - 程序园...
- 评分卡模型开发（三）--数据集准备
- JAVA读锁不使用效果一样_为什么Java的同步集合不使用读/写锁？
- html5 graphics with svg css3,HTML5 Canvas and CSS3 Graphics Primer
- 机器学习 深度学习 ai_人工智能，机器学习和深度学习。 真正的区别是什么？...
- vue 导出excel表格-乱码问题
- 关于内存溢出遇到的两种情况
- Kotlin相关博客资源
- 计算机休眠会断电吗,电脑「睡眠」和「休眠」原来有这么大区别，下次别用错了。...
- 路由的props配置项
- Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks(MAML)简析
- 向大家推荐一部小说《鉴鬼实录》
- 科学计算机计算复合增长率,复合增长率excel公式（年均复合增长率计算器）