如何在小顯示器的情況下保持居中圖像的滾動

我有登錄表單，其中徽標位於頂部，整個表單位於屏幕中央。一切都很完美，但是當我在小型顯示器上試用時，如果此表單不適合垂直放置，則徽標會被裁剪，而我無法在其頂部滾動。如何在小顯示器的情況下保持居中圖像的滾動

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>

我試圖定位是登錄表單還與柔性而不是變換翻譯，但具有相同的結果。任何人都可以幫我解決這個問題嗎？感謝您的任何建議。

來源

2017-10-12 Radovan Kuka

我已經找到解決方案與最終彎曲。這個問題是由變換規則引起的。

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>

來源

2017-10-12 13:29:59

儘量使用小屏幕（使用媒體查詢）：

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

請您需要的屏幕寬度替換「768px」。

來源

2017-10-12 11:38:31 decebal

如果你想防止垂直滾動那麼只有這個答案是對您有用：我僅添加了波紋管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>

來源

2017-10-12 11:57:36

如何在小顯示器的情況下保持居中圖像的滾動

回答

相關問題