为什么我无法在登录和注册代码中更改个人资料图片的大小？(Why can't I change the size of my profile picture in my Sign In and Sign Up code?)
所以我一直在为登录/注册表单编写代码。 我不知道为什么profile-img没有改变它的高度或宽度！
这是我的CSS：
.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .account-wall { margin-top: 20px; padding: 40px 0px 20px 0px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .login-title { color: #555; font-size: 18px; font-weight: 400; display: block; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .need-help { margin-top: 10px; } .new-account { display: block; margin-top: 10px; }这是我的HTML：
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <center> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <font face="Arial Narrow"><h1 class="text-center login-title">Hello</h1> <div class="account-wall"> <img class="profile-img" src="butterfly.jpg" alt=""> <form class="form-signin" method="POST" action=""> <div class="about"><font face="Arial Narrow"><input type="text" class="form-control" name="username" placeholder="Username" required autofocus></div></font> <div class="about"><font face="Arial Narrow"><input type="password" class="form-control" name="password" placeholder="Password" required></div></font> <div class="about"><button class="btn btn-lg btn-primary btn-block" type="submit"> <font face="Arial Narrow">Sign in</button></div></font> <br> <div class="about"> <label class="checkbox"> <input type="checkbox" value="remember-me"> <font face="Arial Narrow">Remember me</font> </label> </div> </form> </div> <a href="MokhaSIGNUP.php" class="text-center new-account about"> <font color="black">Become a member! Click here!</font> </a></font> </div> </div> </div> </center> </body>我不知道我做错了什么。 当我添加高度和宽度，并更改数字时，它保持不变。
我该怎么办？ 无论我改变高度和宽度多少次都不会改变。 即使我删除图片，结果也是一样的。 大小相同，错误表示没有可用的图像。 我错过了什么？ 我会显示一个关于它看起来如何的图像，但我没有足够的良好声誉。
So I have been coding for a Sign In/ Sign Up form. I have no clue as to why the profile-img is not changing its height or width!
Here is my CSS:
.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .account-wall { margin-top: 20px; padding: 40px 0px 20px 0px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .login-title { color: #555; font-size: 18px; font-weight: 400; display: block; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .need-help { margin-top: 10px; } .new-account { display: block; margin-top: 10px; }And here is my HTML:
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <center> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <font face="Arial Narrow"><h1 class="text-center login-title">Hello</h1> <div class="account-wall"> <img class="profile-img" src="butterfly.jpg" alt=""> <form class="form-signin" method="POST" action=""> <div class="about"><font face="Arial Narrow"><input type="text" class="form-control" name="username" placeholder="Username" required autofocus></div></font> <div class="about"><font face="Arial Narrow"><input type="password" class="form-control" name="password" placeholder="Password" required></div></font> <div class="about"><button class="btn btn-lg btn-primary btn-block" type="submit"> <font face="Arial Narrow">Sign in</button></div></font> <br> <div class="about"> <label class="checkbox"> <input type="checkbox" value="remember-me"> <font face="Arial Narrow">Remember me</font> </label> </div> </form> </div> <a href="MokhaSIGNUP.php" class="text-center new-account about"> <font color="black">Become a member! Click here!</font> </a></font> </div> </div> </div> </center> </body>I have no idea as to what I am doing wrong. When I do add a height and width, and change the numbers, it stays the same.
What should I do? No matter how many times I change the height and width it won't change. Even if I remove the picture, the result is the same. Same size with an error saying no image available. What am I missing? I would display an image as to how it looks, but I don't have enough good reputation.
最满意答案
它为我工作，这里是小提琴https://jsfiddle.net/049Lj4LL/8/
我将大小从96x96更改为200x200
.profile-img { width: 200px; height: 200px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }its working for me, here is the fiddle https://jsfiddle.net/049Lj4LL/8/
I changed the size from 96x96 to 200x200
.profile-img { width: 200px; height: 200px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }更多推荐
发布评论