我正在尝试制作一个响应式div。主div包含2个子div。第一个子div包含几个输入框,第二个子div包含一个图像。
第一个问题是当我调整浏览器的大小时,第二个子div是一个图像属于第一个文本框,第二个问题是第一个子div与第二个图像div的高度不同。
Html代码:
<div class="home-login-widget">
<div class="login-block">
<form method="post" action="#">
<input value="" placeholder="Username" id="username" type="text">
<input value="" placeholder="Password" id="password" type="password">
</form>
</div>
<div class="hero-image">
<img src="https://s23.postimg.org/ahcg75tsb/hero.png" alt="">
</div>
</div>
演示 - https://jsfiddle.net/d15mvusg/
是否可以创建背景图像然后调整大小?
非常感谢任何帮助。
答案 0 :(得分:1)
要在调整大小时保持.hero-image
div不在.login-block
下,请将box-sizing: border-box;
应用于两者。填充是导致它们像这样包裹的原因,即使一个是30%宽度而另一个是61%宽度(因此,理论上,它们应该总是并排,因为总宽度<100% )。使用border-box
将使他们尊重指定的宽度而不用填充或边框将盒子模型推到100%以上。
要使两个盒子的高度相同,如果你想保留它的纵横比,你就会牺牲图像的宽度。将两个框放在同一高度的简单方法是在父级上使用display: flex;
。一个很好的反应是(正如你在帖子中提到的那样)将图像设置为background-image
并使用background-size: cover;
使其尽可能适合背景图像容器的任何形状。
.home-login-widget {
display: flex;
width: 100%;
}
#content-home .login-block h1 {
clear: left;
color: #fff;
float: left;
font-family: georgia;
font-size: 2em;
font-style: italic;
font-weight: normal;
line-height: 1.2em;
padding: 1rem 0 0 !important;
text-align: left;
width: 100%;
}
.login-block input#username {
background: #2b2e30 url("images/login_input_username_bg.jpg") no-repeat scroll left top / 275px 41px;
}
.login-block input#password {
background: #2b2e30 url("images/login_input_pwd_bg.jpg") no-repeat scroll left top / 275px 41px;
}
.login-block input {
border: medium none;
box-sizing: border-box;
color: #9c9b9b;
display: block;
font-size: 14px;
height: 41px !important;
margin-bottom: 20px;
padding: 0 20px 0 50px;
width: 100%;
}
.login-block {
display: block;
float: left;
padding: 2rem;
width: 33.3%;
background: #323537;
}
.hero-image {
position: relative;
text-align: right;
flex-grow: 1;
background: url('https://s23.postimg.org/ahcg75tsb/hero.png') top center no-repeat;
background-size: cover;
}
img {
height: 100%;
}
.hero-image h2 {
background: #ff2bff none repeat scroll 0 0;
color: #fff;
left: 0;
margin: 0 auto;
padding: 1rem 2rem;
position: absolute;
right: 0;
text-align: center;
top: 8rem;
width: 200px;
}
#content-home .login-block h1 {
clear: left;
color: #fff;
float: left;
font-family: georgia;
font-size: 2em;
font-style: italic;
font-weight: normal;
line-height: 1.2em;
padding: 1rem 0 0 !important;
text-align: left;
width: 100%;
}
#content-home h1 {
clear: left;
color: #444c4c;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 2em;
font-style: italic;
font-weight: normal;
line-height: 1.3em;
padding: 0 0 46px !important;
text-align: center;
width: 205px;
}
.login-block, .hero-image {
box-sizing: border-box;
}
<div class="home-login-widget">
<div class="login-block">
<form method="post" action="#">
<input value="" placeholder="Username" id="username" type="text">
<input value="" placeholder="Password" id="password" type="password">
</form>
</div>
<div class="hero-image">
</div>
答案 1 :(得分:1)
是的,你应该使用border-box
。所有很酷的孩子都在这样做。
*{box-sizing: border-box;}
.home-login-widget {
background: url('https://s23.postimg.org/ahcg75tsb/hero.png') no-repeat 100% 0%;
background-size: 70%;
display: block;
float: left;
width: 100%;
}
#content-home .login-block h1 {
clear: left;
color: #fff;
float: left;
font-family: georgia;
font-size: 2em;
font-style: italic;
font-weight: normal;
line-height: 1.2em;
padding: 1rem 0 0 !important;
text-align: left;
width: 100%;
}
.login-block input#username {
background: #2b2e30 url("images/login_input_username_bg.jpg") no-repeat scroll left top / 275px 41px;
}
.login-block input#password {
background: #2b2e30 url("images/login_input_pwd_bg.jpg") no-repeat scroll left top / 275px 41px;
}
.login-block input {
border: medium none;
box-sizing: border-box;
color: #9c9b9b;
display: block;
font-size: 14px;
height: 41px !important;
margin-bottom: 20px;
padding: 0 20px 0 50px;
width: 100%;
}
.login-block {
display: block;
float: left;
padding: 2rem;
width: 30%;
background: #323537;
}
.hero-image {
background: url('https://s23.postimg.org/ahcg75tsb/hero.png') no-repeat;
background-size: cover;
display: inline;
float: left;
position: relative;
text-align: right;
height: 100%;
width: 70%;
}
img {
max-width: 100%;
}
.hero-image h2 {
background: #ff2bff none repeat scroll 0 0;
color: #fff;
left: 0;
margin: 0 auto;
padding: 1rem 2rem;
position: absolute;
right: 0;
text-align: center;
top: 8rem;
width: 200px;
}
#content-home .login-block h1 {
clear: left;
color: #fff;
float: left;
font-family: georgia;
font-size: 2em;
font-style: italic;
font-weight: normal;
line-height: 1.2em;
padding: 1rem 0 0 !important;
text-align: left;
width: 100%;
}
#content-home h1 {
clear: left;
color: #444c4c;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 2em;
font-style: italic;
font-weight: normal;
line-height: 1.3em;
padding: 0 0 46px !important;
text-align: center;
width: 205px;
}
<div class="home-login-widget">
<div class="login-block">
<form method="post" action="#">
<input value="" placeholder="Username" id="username" type="text">
<input value="" placeholder="Password" id="password" type="password">
</form>
</div>
</div>