疑问？：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>