當瀏覽器窗口垂直縮放時CSS調整失敗

Question

我想創建一個簡單的登錄頁面，前一段時間學習了關於CSS3 flexbox後，我使用這個新概念重新編寫了頁面。所以，現在，我的網頁看起來是這樣的：

這是我想要的東西......直到我試圖調整瀏覽器。然後，我得到這個（當我簡單地降低了瀏覽器窗口的高度不降低寬度）：

和這個（當我的高度和瀏覽器窗口的寬度爲最小均降低）：

這讓我感到困惑，因爲我在其他計算器的答案，我不需要有媒體查詢沒有建立起一個負責任的網頁設計（我不打算這樣做，以後）讀取，但通過以百分比的形式指定最大寬度來使用CSS。

這裏是我的代碼：

HTML：

<div class="center"> 
    <!-- Logo --> 
    <img id="logo" src="assets/logowshadow.png" alt="cueclick logo"> 

    <!-- Login element --> 
    <form class="login" action="/action_page.js" method="post"> 
     <p>Enter <i>your</i> secret key</p> 
     <div id="password"> 
      <img id ="eye" src="assets/eye2.png" alt="eye"> 
      <input type="password" name="secret-key" placeholder="ilovecueclick" autofocus autocomplete="off"/> 
     </div> 
    </form> 
</div> 

CSS：

/* -- Background image -- */ 
body { 
    background-image: url(assets/wood.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 

/* -- Center element -- */ 
.center { 
    max-width: 60%; 
    max-height: 80%; 
    width: 30%; 
    height: 40%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    background-color: rgba(255, 255, 255, 0.7); 
    border-radius: 15%; 
    box-shadow: 2px 2px 4px 3px #505050; 
    position: absolute; 
    z-index: 1; 
} 

/* -- Logo style -- */ 
#logo { 
    position: relative; 
    z-index: 2; 
    max-width: 100%; 
    height: auto; 
} 

/* -- Form styles -- */ 
form.login { 
    max-width: 100%; 
    height: auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    z-index: 2; 
} 

#password { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    margin-bottom: 5%; 
} 

/* -- Show password -- */ 
#eye { 
    height: auto; 
    max-width: 15%; 
    margin-right: 3%; 
} 

/* -- Login element -- */ 
form.login p { 
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; 
    font-size: 2vw; 
    max-width: 100%; 
    height: auto; 
    line-height: 2%; 
} 

form.login input[type=password] { 
    max-width: 100%; 
    width: 100%; 
    height: auto; 
} 

要解釋一下這個代碼，還做： - 體內有一個完整的大小的背景圖片瀏覽器窗口 - 「中心」在本質上是半透明的白色矩形背景 以上 - 標誌和形式登錄元素重疊的白色矩形

我也創建了三個柔性容器的柔性項目（處理定心的問題）： 1）body是flex容器，flex是中心元素 2）center是flex容器，logo和表單輸入部分（即。 3）「密碼」div是flex容器（內聯），眼睛和登錄字段是彈性項目

我真的不確定在哪裏問題在於，因爲似乎與當前的代碼取得了一定的比例...

完整的HTML可以在這裏找到：https://pastebin.com/6tS6SXi3，以及完整的CSS可以在這裏找到：提前https://pastebin.com/6M11HnJE

謝謝！

編輯：

進一步試驗之後，事實證明，我只是不得不讓中央級的高度是自動...

接受它，即使它不使用簡單的答案flex-box就像我想要的那樣

Answer 1

使用HTML和CSS構建表單包裝，而不是使用圖像，當屏幕尺寸發生變化時，圖像很難控制。

樣品： https://codepen.io/anon/pen/NgPGoQ

.login { 
    width: 300px; 
} 

@media screen and (max-width: 768px) { 
    .login { 
    width: 80%; 
    } 
} 

設置您的包裝具有默認寬度和添加媒體查詢爲您想自定義的寬度的屏幕尺寸。

Answer 2

開始從移動起來..

像這樣的東西（東北角調整100％到您所希望的）來自移動

工作桌面，我thinki你會發現你的情況更容易處理該方式..

這種調整大小爲我好..

@media (max-width:768px){ 
    .center { 
    max-width: 100%; 
    max-height: 100%; 
    width: 100%; 
    height: 100%; 
    } 

/* -- Logo style -- */ 
#logo { 
    max-width: 100%; 
    height: auto; 
} 

/* -- Form styles -- */ 
form.login { 
    max-width: 100%; 

} 

#password { 
max-width:100% 
} 

/* -- Show password -- */ 
#eye { 
    max-width: 100%; 
} 

/* -- Login element -- */ 
form.login p { 
    max-width: 100%; 
    height: auto; 
} 

form.login input[type=password] { 
    max-width: 100%; 
    width: 100%; 
    height: auto; 
} 


}