老师，如何让图片在浏览器显示100%？

<html>
<head>
	<title>Career Builder</title>
</head>
<body>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<!-- 顶部部分 -->
	<div class="header">
		<div class="logo">
			<img src="images/logo.png">
		</div>
		<div class="auth">
			<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>
		<!-- banner部分 -->
		<div class="banner">
			<!-- 图片 -->
			<div class="banner-pic">
				<img src="images/banner3.jpg">
			</div>
			<!-- 遮罩层 -->
			<div class="topLayer">
			</div>
			<div class="btn">
		<form>
				<input type="text" name="" placeholder="your Name"><br>
				<input type="text" name="" placeholder="your phone"><br>
				<input type="text" name="" placeholder="your Email"><br>
				<textarea cols="30" rows="5" placeholder="Write Your Comment Here"></textarea><br>
				<input type="submit" value="SEND MESSAGE">
			</form>
		</div>
		</div>

		<!-- ABOUT区 -->
		<div class="about">
			<div class="about-pic">

			</div>
		</div>
</body>
</html>
*******************************************
*{
	margin:0;
	padding:0;
}

.header{
	margin: auto;
	width:100%;
	height:50px;
	background-color:#07cbc9;
	position:fixed;
}
.header .logo{
	float:left;
	height:50px;
}

.header .auth{
	float:right;
}

a{
	color:white;
	text-decoration:none;
	font-family: Microsoft YaHei UI;
}


.header .auth ul li{
	float:left;
	margin-right:50px;
	margin-top:15px;
	list-style:none;
	font-size:13px;
}

.header .auth ul li:hover{
	/width:70px;
	height:30px;
	background-color:black;
	border: 1px solid;
}

.banner .pic{
	width:100%;
	height: 800px;
	position: absolute;
}

.banner .pic img{
	width:100%;
	height: 800px;
}

/*设置边框属性*/
.topLayer{
	background-color:#000;
	opacity:0.4;
	z-index:1;
	position:absolute;
	top:50px;
	width:100%;
	height:750px;
}

.banner .btn{
	z-index:2;
	width:550px;
	position:absolute;
	top:400px;
	margin-top: -150px;
	right: 40%;
	margin-right:-160px;
}

.banner textarea{
	width:90%;
	margin:2px auto 2px auto;
	background-color: transparent;
}

.banner textarea:hover{
	border:1px solid #07cbc9;
}

.banner input[type="text"]{
	background-color: transparent;
	width:90%;
	height:30px;
	margin:2px auto 2px auto;
}
.banner input[type="text"]:hover{
	border:1px solid #07cbc9;
}

.banner input[type="submit"]{
   color: #bdbdbd;
    padding: 10px;
    margin: 10px;
    background-color: transparent;
    border: 2px solid gray;
    outline: none;
    width:30%;
}

.banner input[type="submit"]:hover{
	background-color: #07cbc9;
	color:#fff;
	border:1px solid #07cbc9;
}

霸气的少年 2019-12-29

源自：前端油画商城案例 4-3 项目作业

收起

1回答

好帮手慕小班回答被采纳获得+3积分 2019-12-29 16:53:01

同学你好，同学是想实现如下的背景图片的100展示吧

想要实现图片在浏览器100%的展示，同学可以设置banner下的banner-pic下的img的width(宽度)为100%的展示，添加这个内容后，同学再来查看下，图片是否是100%占满。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

霸气的少年提问者 #1

我设置宽度100%了？但是它还是会溢出，变成浏览器下边有滚轮条，要用鼠标拖移才能显示完

2019-12-29 16:57:53
好帮手慕小班回复提问者霸气的少年 #2

同学你好，这里老师添加banner下的banner-pic下的img width:100%；并没有出现同学所描述的浏览器下方有滚动条的展示，建议同学将修改后的代码贴出，注意不要贴在回复中，会失去代码的格式，可以在"我要回答"中贴出。如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

2019-12-29 17:20:19