1つのイメージと1つのコンテンツボックスを含む反応的なdiv

Question

私は反応的なdivを作成しようとしています。メインのdivには2つの子divが含まれます。最初の子divには2つの入力ボックスが含まれ、2つ目の子divには画像が含まれます。

最初の問題は、画像である2番目の子divが最初のテキストボックスに入り、2番目の問題は最初の子divが2番目の画像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>