为什么banner区的图片设置了宽度100% 右边显示还有大片空距呢
来源：2-10 作业题
anan_123
2019-08-15 18:41:32
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> *{ border: 0; margin: 0; list-style: none; } .header{ width: 100%; overflow: hidden; background: #07cbc9; height: 80px; position: fixed; top: 0; z-index: 999; } .header .logo{ margin-top: 16px; margin-left: 50px; float: left; } .header .nav { float: right; overflow: hidden; height: 80px; } .header .nav ul li{ float: left; margin-right: 20px; line-height: 80px; } a{ text-decoration: none; color: white; } .banner{ margin: 0 auto; width: 100%; height: 800px; margin-top: 80px; } .banner .beijing{ width: 100%; height: 800px; } .banner .zhe{ width: 100%; height: 800px; position: absolute; top: 80px; background: black; opacity: 0.1; } </style></head><body> <div class="header"> <div class="logo"> <a href="#"><img src="./图片/logo.png" alt=""></a> </div> <div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">FACULTY</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> <div class="banner"> <div class="beijing"> <img src="./图片/banner3.jpg" alt=""> </div> <div class="zhe">
</div> </div></body></html>
2回答
-
秋之枫华
2019-08-15
你只是给图片外面的div .beijing设置了宽100%，这个对图片是不起作用的，图片的宽度也要设置一下
1 -
好帮手慕码
2019-08-15
同学你好！
需要给img设置宽度100%才能实现图片全屏显示：
效果：
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题