div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式

最新推荐文章于 2024-07-31 16:36:47 发布

小懒羊爱吃草

最新推荐文章于 2024-07-31 16:36:47 发布

阅读量1.1w

点赞数 6

分类专栏：前端问题Tips

本文链接：https://blog.csdn.net/csucsgoat/article/details/111769775

版权

零.问题描述和基本情况介绍

案例：

问题及疑问：

一.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>