疑问？：div的height和weight如何自适应背景图的尺寸
来源：7-2 编程练习
火锅我喜欢吃麻辣的
2020-12-26 21:36:57
<!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://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的只存自适应图片的宽度？
就像div0，如果height如果设置的短了，图片显示不全；如果div设置的长了会出现下图这样的现象：
写回答
1回答
-
同学你好，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://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>祝学习愉快！
0
相似问题