小さなディスプレイの場合に中央の画像のスクロールを保存する方法

Question

私はロゴが上部にあり、フォーム全体が画面の中央にあるログインフォームを持っています。すべてが完璧に動作しますが、このフォームが垂直に収まらない小さなディスプレイで試してみると、ロゴが切り取られ、その上をスクロールできません。

Simplyfied例はここにある：

.login-form { 
 
    width: 250px; 
 
    background-color: #eee; 
 
    padding: 20px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.logo { 
 
    width: 100%; 
 
} 
 

 
.img-container { 
 
    margin-bottom: 20px; 
 
} 
 

 
.form-container { 
 
    text-align: center; 
 
} 
 

 
.button { 
 
    width: 80px; 
 
} 
 

 
input { 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
}

<div class="login-form"> 
 
    <div class="img-container"> 
 
    <img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png" alt="logo" class="logo"> 
 
    </div> 
 

 
    <form class="form-container"> 
 
    <input type="text" placeholder="Username"> 
 
    <input type="password" placeholder="Password"> 
 
    
 
    <button>Login</button> 
 
    </form> 
 
</div>

私はフレックスでも、そのログインフォームを配置の代わりに、翻訳変換しようとしましたが、同じ結果に。誰もこの問題で私を助けることができますか？アドバイスありがとう。

Answer 1

私は最終的にフレックスと解決策を発見しました。その問題は変換ルールによって引き起こされました。

html, body { 
 
    height: 100%; 
 
} 
 

 
.centered-box { 
 
    min-height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 

 
.login-form { 
 
    width: 250px; 
 
    background-color: #eee; 
 
    padding: 20px; 
 
} 
 

 
.logo { 
 
    width: 100%; 
 
} 
 

 
.img-container { 
 
    margin-bottom: 20px; 
 
} 
 

 
.form-container { 
 
    text-align: center; 
 
} 
 

 
.button { 
 
    width: 80px; 
 
} 
 

 
input { 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
}

<div class="centered-box"> 
 
    <div class="login-form"> 
 
    <div class="img-container"> 
 
     <img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png" alt="logo" class="logo"> 
 
    </div> 
 

 
    <form class="form-container"> 
 
     <input type="text" placeholder="Username"> 
 
     <input type="password" placeholder="Password"> 
 

 
     <button>Login</button> 
 
    </form> 
 
    </div> 
 
</div>

Answer 2

は、小さな画面（メディアクエリを使用して）のために使用してみてください：

@media screen and (max-width: 768px) { 
    .login-form { 
     top: 0; 
     transform: translate(-50%, 0%); 
    } 
} 

必要な画面の幅に「768px」を交換してください。

Answer 3

あなたがスクロール垂直を防ぎたい場合は、これだけの答えはあなたのために有用である：私は怒鳴る2クラスを追加しました：

/* You can Change the width of small device screen you expected */ 
@media screen and (max-width: 480px){ 
    .logo { 
    width: auto; 
    max-height: 30vh;/*Adjust it as per your logo size*/ 
    min-width: 15vw; /*Adjust it as per your logo size*/ 
} 
.img-container { 
     margin-bottom: 20px; 
text-align:center; 
    } 


             
  
 
   
 
    
.login-form { 
 
     width: 250px; 
 
     background-color: #eee; 
 
     padding: 20px; 
 
     position: absolute; 
 
     left: 50%; 
 
     top: 50%; 
 
     transform: translate(-50%, -50%); 
 
    } 
 

 
    .logo { 
 
     width: 100%; 
 
     max-height: 
 
    } 
 

 
    .img-container { 
 
     margin-bottom: 20px; 
 
     text-align:center; 
 
    } 
 

 
    .form-container { 
 
     text-align: center; 
 
    } 
 

 
    .button { 
 
     width: 80px; 
 
    } 
 

 
    input { 
 
     width: 200px; 
 
     margin-bottom: 10px; 
 
    } 
 
/* You can Change the width of small device screen you expected */ 
 
@media screen and (max-width: 480px){ 
 
    .logo { 
 
     width: auto; 
 
     max-height: 30vh; 
 
     min-width: 15vw; 
 
    } 
 
}
 
    
<div class="login-form"> 
 
     <div class="img-container"> 
 
     <img src="https://pmcdeadline2.files.wordpress.com/2016/07/logo-tv-logo.png" alt="logo" class="logo"> 
 
     </div> 
 

 
     <form class="form-container"> 
 
     <input type="text" placeholder="Username"> 
 
     <input type="password" placeholder="Password"> 
 
     
 
     <button>Login</button> 
 
     </form> 
 
    </div>