I'm making a HTML website for a school project, and I want to change the size of my image on the login page. The width changes, but the height doesn't, so I just end up with one really long picture.
Here is my HTML code:
<html>
<body>
<div class="outer-wrap">
<div class="inner-wrap">
<div class="content">
<div class="cont">
<div style="height:200px;" class="center">
<img class="logo" src="http://i.imgur.com/t0d0VlV.png?1" height="500px" border="0">
<h1>Wonder.land</h1>
</div>
<form class="center">
<input type="text" placeholder='Username' required><br/>
<input type="Password" placeholder='Password' required><br/>
<br/>
<button>Sign In</button>
</form>
<div class="center">
<span>No account yet? <a href="#">Sign up!</a></span>
<br/>
</div>
</div>
</div>
</div>
</div>
<link type="text/css" rel="stylesheet" href="lala.css"/>
</body>
</html>
And here is my CSS code:
html,body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
font-family: Montserrat;
background: #ededed;
color: #fff;
background: -webkit-radial-gradient(rgb(156,28,107) 25%, rgb(228,114,151)100%);
}
input[type='text'],input[type='email'],input[type='password']{
padding: 10px 20px;
border: 0px;
color:rgb(49,49,49);
background-color: rgba(0,0,0,0);
background-image: url(http:
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 24px;
clear: both;
font-family: Montserrat;
margin-top:20px;
}
input[type='submit'], button{
padding: 10px 20px;
padding-bottom: 15px;
background-color: rgba(0,0,0,0);
border:0px;
background-image: url(http:
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 22px;
color: #fff;
font-family: Montserrat;
}
button:active{
padding: 10px 20px;
padding-bottom: 15px;
background-color: rgba(0,0,0,0);
border:0px;
background-image: url(http:
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 22px;
color: #fff;
font-family: Montserrat;
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.center{
width: 100%;
text-align: center;
margin-top: 20px;
}
.outer-wrap{
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.inner-wrap{
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.content {
margin: auto !important;
width: 400px;
text-align: left;
}
@media(max-width: 400px){
.content{
width: 280px;
}
input{
width: 80%;
}
}
.logo{
max-height: 60px;
}
.center h1{
text-align: center;
}
Any ideas are welcome.
What I have tried:
I've tried adding height and width tags.