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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<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