改变我的图像大小？ [英] Change the size of my image?
本文介绍了改变我的图像大小？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为学校项目制作一个HTML网站，我想在登录页面上更改我的图像大小。宽度变化，但高度不变，所以我最后得到一张非常长的图片。
这是我的HTML代码：
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>
这是我的CSS代码：
And here is my CSS code:
html,body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
font-family: Montserrat;
background: #ededed;
color: #fff;
/*background: rgb(0,140,220);*/ /* For browsers that do not support gradients */
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://i.imgur.com/q43nh42.png);
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://i.imgur.com/lDRGUL6.png);
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://i.imgur.com/amJPl6n.png);
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.
推荐答案
您已使用以下代码在css中将最大高度设置为60。
You have set the maximum height to 60 in your css using below code.
.logo{
max-height: 60px;
}
删除css类并在img标签下方指定高度。
Remove that css class and specify height whatever you want in below img tag.
<img class="logo" src="http://i.imgur.com/t0d0VlV.png?1" height="500px" border="0">
如果您在其他页面中使用徽标类n从img标签中删除class =logo。
请参阅此处，修订后的代码 [ ^ ]
这篇关于改变我的图像大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
