画面サイズが変わった際にボックスモデルも合わせて変わる方法

前提・実現したいこと

お世話になっております。
現在RubyonRailsでアプリを制作しており、cssでレイアウトを整えております。
ログイン画面のレイアウトを整えているのですが、画面サイズを変更した際、全てに反映されず、うまくいきません。
今直面している問題なのですが、
画面サイズを小さくした際に、背景画像はサイズに合わせて変わるのですが、
フォームが入っているボックスモデルだけ変わらないため、背景画像からフォームが入っているボックスが飛び出してしまうという状態になってしまいます。
色々試したのですが、反映されないため、ご教示いただけると助かります。

宜しくお願い致します。

該当のソースコード

【html】
<!-- サインアップ -->
<div class="main-visual">
      <div class="box">
        <div class="brand-head">
          <h1 id="brand-logo_top">Cset</h1>
        </div>

        <div class="title_box">
          <p class="title">所持している服を管理しよう</p>
        </div>

        <div class="user_box">
          <h2 class="login">サインアップ</h2>

          <form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="yjZ6s555oCqYPRB5hEoJgnOfAuAyTbTVUhnShbY+CchsLp4+9CyhD3bqxAYWBrPLVkJdMWytlDvxJ1RccBLs/A==">
            
            <div class="name_field">
              <label for="user_name">Name</label><br>
              <input autofocus="autofocus" autocomplete="name" type="text" name="user[name]" id="user_name">
            </div>

            <div class="mail_field">
              <label for="user_email">Email</label><br>
              <input autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email">
            </div>

            <div class="password_field">
              <label for="user_password">Password</label>
              <em>(6 characters minimum)</em>
              <br>
              <input autocomplete="new-password" type="password" name="user[password]" id="user_password">
            </div>

            <div class="password_field">
              <label for="user_password_confirmation">Password confirmation</label><br>
              <input autocomplete="new-password" type="password" name="user[password_confirmation]" id="user_password_confirmation">
            </div>

            <div class="actions">
              <input type="submit" name="commit" value="Sign up" data-disable-with="Sign up">
            </div>
          </form>          
           <div class="devise_links">
                <a href="/users/sign_in">▷ログイン</a><br>
           </div>        
        </div>
    </div>
</div>

【css】
.main-visual {
  background-image: url("image_top.jpg");
   /* 画像を常に天地左右の中央に配置 */
  background-position: center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-size: cover;
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
  position: relative;

  width: 100vw;
  /*vw ビューポートの幅に対する割合*/
  height: 100vh;
   /*vw ビューポートの高さに対する割合*/
  display: inline-block;
}

.main-visual::before{
    /* 透過した黒を重ねる */
    background-color: rgba(0,0,0,0.2);
    /* どの範囲に重ねるかを指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

#brand-logo_top {
    color: white;
    font-size: 500%;
    text-align: center;
}

.title_box{
    width: 100%;
    height: 50px;
    background-color: white;
    opacity: 0.7;
    color: black;
    font-size: 120%;
    text-align: center;
    margin-top: 30px;
}
.title{
    padding-top: 13px;
    font-weight:bold;
}

.user_box{
    background-color: white;
    width: 250px;
    height: 320px;
    margin: auto;
    position: relative;
}

.login {
    color: black;
    padding-top: 30px;
}
/*

試したこと

親ボックスモデルを%にしたり、フォームが入っている箱の幅/高さの単位をvw/vhにしたりもしてみましたが、
反映されませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

最終的な着地点がよくわかりませんのでなんですが、右方向や下方向に.user_boxが背景エリアを飛び出てしまうという件については、単体の原因ではなく、あちこちに修正したほうが良い箇所があります。
下に箇条書きさせてもらいます。

１：.main-visualのheightに関してはautoで大丈夫です。もし、.user_boxの下にいつでも余白がほしいならbodyに直接か、もう一つdivタグを設けるなりしてそこにpadding-bottomを設定するのが無難です。

２：h1タグのfont-sizeが大きく、ウィンドウの横幅を縮めたときに文字の取る幅が.user_boxの幅を超えてしまい、そのままサイトの横幅になります。h1にmax-widthを設けるなり、文字が.user_boxの幅を超えないようにサイズを設定しないと検証がややこしくなります。

３：.user_boxにmax-width:100%をつけたほうがおそらく安全です。

４：.user_boxのheightはmin-heightとしないと横幅を縮めたときに中身の文章量次第で破綻します。

以上を踏まえるとこんな感じになりました。
あと、端折ってるだけとは思いますがbodyのmarginとpaddingも0にしたほうがいいです。

.main-visual {
  background-image: url("image_top.jpg");
   /* 画像を常に天地左右の中央に配置 */
  background-position: center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-size: cover;
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
  position: relative;

  width: 100vw;
  /*vw ビューポートの幅に対する割合*/
  height: auto;
   /*vw ビューポートの高さに対する割合*/
  display: inline-block;
}

.main-visual::before{
    /* 透過した黒を重ねる */
    background-color: rgba(0,0,0,0.2);
    /* どの範囲に重ねるかを指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

#brand-logo_top {
    color: white;
    font-size: 100%;
    text-align: center;
    max-width:100%;
}

.title_box{
    width: 100%;
    height: 50px;
    background-color: white;
    opacity: 0.7;
    color: black;
    font-size: 120%;
    text-align: center;
    margin-top: 30px;
}
.title{
    padding-top: 13px;
    font-weight:bold;
}

.user_box{
    background-color: white;
    width: 250px;
    max-width:100%;
    height: auto;
    min-height:320px;
    margin: auto;
    position: relative;
}

.login {
    color: black;
    padding-top: 30px;
}

投稿2019/04/02 12:13