具有一个图像和一个内容框的响应div

Question

我正在尝试制作一个响应式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/

是否可以创建背景图像然后调整大小？

非常感谢任何帮助。

Answer 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>

Answer 2

迈克尔有一个很好的答案。但是，如果你想要另一个选项，我认为创建一个div只是为了包含一个图像是有点不必要的。在这种情况下，我们可以简单地将图像作为背景和大小附加到父元素。

是的，你应该使用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>