图片大小明明正好,为什么会出现竖向的滑动条呢
```bash
/* 登录页面 */
/* body背景 */
.login_bg{
width: 100%;
position: relative;
}
/* 背景图 */
.login_bg > img{
width: 100%;
}
/* 整个布局页面 */
.login_bg > div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
/* 顶部 */
.login_title {
height: 1.2rem;
/* line-height: .3rem; */
text-align: right;
font-size: 0.38rem;
padding-right: 0.5rem;
/* text-align: center; */
}
.login_title a span{
color: #fd6246;
font-size: 1rem;
line-height: 1.2rem;
}
/* 小图标 */
.login_title .icon {
position: absolute;
left: 0.5rem;
top: 0.26rem;
width: 0.48rem;
height: 0.92rem;
background: url(../image1/login_back.png) no-repeat;
background-size: 0.48rem 0.92rem;
vertical-align: middle;
}
/* 登录内容 */
.login_content {
margin-top: 7rem;
}
/* 用户/密码css */
.login_content input {
background-color: transparent;
color: #979797;
width: 100%;
margin-right: 10%;
border: none;
font-size: 1rem;
outline: none;
text-align: center;
border-bottom: 1px solid #ddd;
padding-top: 2rem;
}
/* 图标 */
/* .login_content .icon {
width: .32rem;
height: .32rem;
} */
/* 用户/手机号 密码 */
.username,.password{
margin-left: 10%;
display: flex;
align-items: flex-end;
}
/* 点击input框,字体颜色变了 */
.login_content .username,.password input:focus {
color: #beb5b5;
}
.login_content .username input:focus::-webkit-input-placeholder {
color: #beb5b5;
}
/* 小眼睛 */
.password{
position: relative;
}
.login_content .password .icon_eye {
position: absolute;
right: 10%;
/* top: 0.7rem; */
bottom: 0.5rem;
/* width: 0.45rem; */
}
/* 按钮 */
.btn {
display: block;
width: 80%;
margin: 0 auto;
text-align: center;
font-size: 1rem;
color: #fff;
height: 2.5rem;
line-height: 2.5rem;
border-radius: 1rem;
}
.login_btn {
background-color: #fd6246;
margin-top: 3rem;
}
/* 忘记密码 */
.login_content .forget_btn {
width: 6.02rem;
margin: 0.42rem auto 0;
text-align: center;
}
.login_content .forget_btn a {
font-size: 0.24rem;
color: #e17e8e;
}
/* 第三方登录 */
.thirdPartyLoginWrap {
margin-top: 1rem;
text-align: center;
padding-top: 0.7rem;
}
.thirdPartyLoginWrap ul {
/* display: inline-block;
text-align: center; */
display: flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
}
.thirdPartyLoginWrap li {
width: 4rem;
/* height: 0.78rem; */
/* float: left; */
}
.thirdPartyLoginWrap li a {
display: block;
width: 100%;
height: 100%;
}
.thirdPartyLoginWrap li {
margin: 0 0.56rem;
}
.thirdPartyLoginWrap li img {
display: block;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
<title>登录页面1</title>
<link rel="stylesheet" href="./css/reset.css"/>
<link rel="stylesheet" href="./css/Login1.css">
</head>
<body>
<div class="login_bg">
<!-- 背景图 -->
<img src="./image1/login_bg.png" alt="">
<!-- 页面 -->
<div>
<!-- 顶部 -->
<div class="login_title">
<a href="index.html"><i class="icon"></i></a>
<a href="reg1.html"><span>注册</span></a>
</div>
<!-- 登录内容 -->
<div class="login_content">
<!-- 用户名 -->
<div class="username">
<!-- <i class="icon icon_user"></i> -->
<img src="./image1/user_login.png" alt="" class="icon icon_user">
<input type="text" id="user" placeholder="用户名/手机号">
</div>
<!-- 密码 -->
<div class="password">
<img src="./image1/pwd_login.png" alt="" class="icon icon_user">
<input type="password" id="pwd" placeholder="密码">
<img src="./image1/bkj.png" class="icon_eye">
</div>
<!-- 登录 -->
<span class="btn login_btn">登录</span>
<!-- 忘记密码 -->
<p class="forget_btn">
<a href="forgetPwd.html">忘记密码?</a>
</p>
<!-- 登录快捷方式 -->
<div class="thirdPartyLoginWrap">
<div>使用第三方账号登录</div>
<ul class="clearfix">
<li id="wechatBtn">
<a href="javascript:;" class="wechat">
<img src="./image1/WeChat.png" alt="">
</a>
</li>
<li id="QQBtn">
<a href="javascript:;" class="wechat">
<img src="./image1/QQ.png" alt="">
</a>
</li>
<li id="weiboBtn">
<a href="javascript:;" class="wechat">
<img src="./image1/Weibo.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
```