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手动设置大小，并不能自适应背景图的尺寸

CSS：

上面案例中，div的尺寸都是手动设置的，并没有参考实际图片的尺寸，即我们不需要设置div的宽度和高度，实现div自适应图片的尺寸？

为了解答这个疑问，需要先了解background-size:cover;和background-size:100%;的区别；然后本博客会介绍一下两种方法来解决这个问题；

（PS：目前的解决方案，仅限于HTML和CSS，并没有JavaScript）

background-size:x%：

        ● x表示图片占据所在div的宽度的百分比；

        ● 图片的长宽比例不会变化，即使由于div太短而导致图片显示不全，图片的长宽比例也不会变化；

        ● 图片”宽度“上完全显示的，长度上能够显示全需要看div的长度够不够；

具体可以看下面的例子：

示例程序：

示例1：

效果：

……………………………………………………

示例二：

效果：

示例三：

效果：

发现，当高度够的时候，background-size:100%就是完全适应div，等比的缩放完全填充所在的父div；

示例1：

效果：

示例2：

效果：发现，background-size:100%图片长宽比例不变的情况下，完全填充div的宽度！！！！！！！！！！！！；自然能发生下图这种部分不显示的情况。

效果：又一次印证background-size:50%：是根据宽度自适应的；

再如：

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法背景定位区域中。

为了便于演示，把图片截取成了300*200的图片，即此时图片的宽高比是 3:2。

示例1：

效果：宽度完全显示，高度有缺失

示例2：

效果：宽度完全显示，高度有缺失（而且比宽高比是2：1时缺的比例更高）

示例1：

效果：高度完全显示，宽度有缺失

示例2：高度完全显示，宽度有缺失（而且比宽高比是1：1的时候确实的比例更大）

效果：

示例1：

效果：

示例2：

效果：

     通过上面的示例发现，

             background-size:100%;在任何时候都会优先适应宽度；

             background-size:cover;是跨度和高度谁牛逼就适应谁；

通过background-size:cover;和background-size:100%;的性质可以发现，其并不能很好的完成背景图片的自适应；所以为了实现完美的显示的效果，目前只能把对应的长度设置的长一点，以使其能完全显示。

注意下面的四条注释：在不知道图片尺寸的情况下，只能尽量摸索着设置width和height，尽量让其的值合理些。。。。

不使用div的背景图设置，即不使用background-image:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png");这种给div设置背景图的方式实现上述效果：

而是：

此时，如果定义的div正好（纯属巧合）和div设置的尺寸吻合，那么就很完美：图片既没有溢出，div空间也没有多余：

如果div的尺寸设大了：

如果div的尺寸设小了：发生溢出

但无论如何，上面三个div尺寸设置大、小、正好的情况下，都可以实现那个效果；

即图片的width:60%的这个60%参考的是所在div的宽度

示例1：

示例2：

示例3：

示例4：这个例子更能体现，img的width是针对其所在父div来说的，