当浏览器窗口垂直缩放时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; 
} 


}