疑问？：div的height和weight如何自适应背景图的尺寸

<!DOCTYPE html>
<html>
<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>

.div0{
	        background-image:url("http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png");
	        background-repeat:no-repeat;
	        background-attachment:scroll;
	        background-size:100%; /*图片完全充满div*/
	        width:100%;
	        height:10000px;  /*疑问？：div的尺寸如何自适应背景图的尺寸*/
	    }
	    .div1{
	        background-image:url("http://img1.sycdn.imooc.com/climg//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://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png");
	        background-repeat:no-repeat;
	        width:100px;      /*疑问？：div的尺寸如何自适应背景图的尺寸*/
	        height:200px;
	        background-size:100%;  /*图片完全充满div*/


	        position:fixed;
	        top:300px;
	        right:5px; 
	    }

老师，上面三个div都是手动设置的宽度和高度；有没有一种方法可以让div的只存自适应图片的宽度？

就像div0，如果height如果设置的短了，图片显示不全；如果div设置的长了会出现下图这样的现象：

火锅我喜欢吃麻辣的 2020-12-26

源自：CSS定位 7-2 编程练习

收起

1回答

好帮手慕小尤回答被采纳获得+3积分 2020-12-27 11:49:05

同学你好，1. div的尺寸如何自适应背景图的尺寸？

背景图是根据div大小进行设置的，所以div无法根据背景图大小进行自适应，同学可以给div固定的宽度与高度，然后为背景图设置大小（background-size:100%;）。或使用img标签。

2. 关于div0高度的问题？

同学可以修改高度，将高度修改为4000px试一下，或不使用背景图，使用img标签进行设置，则图片可以撑起div高度，与浏览器一般高。参考代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告栏</title>
    <style type="text/css">
       .div1{
        width: 100%;
       }
       .img1{
        width: 100%;

       }
       .div2{
        width: 224px;
        height: 364px;
        position: fixed;
        top: 20%;
        left: 1%;
       }
       .div3{
        width: 224px;
        height: 364px;
        position: fixed;
        top: 20%;
        right: 1%;
       }
    </style>
</head>
<body>
    <div class="div1">
        <img class="img1" src="http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png">
    </div>
    <div class="div2">
        <img src="http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png">
    </div>
    <div class="div3">
        <img src="http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png">
    </div>
</body>
</html>

祝学习愉快！

收起回答