Question

我有登录表单，徽标位于其顶部，整个表单位于屏幕中央。一切都很完美但是当我在小型显示器上尝试时，这种形式不适合垂直，标志被裁剪，我不能在它的顶部滚动。

简单的例子就在这里：

.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>

我尝试使用flex而不是transform translate定位该登录表单，但结果相同。任何人都可以帮我解决这个问题吗？谢谢你的任何建议。

Answer 1

尝试用于小屏幕（使用媒体查询）：

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

请替换＆＃34; 768px＆＃34;你需要的屏幕宽度。

Answer 2

如果您想要垂直预防滚动，那么只有这个答案对您有用：我只添加了以下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>

Answer 3

我最终找到了带有flex的解决方案。这个问题是由转换规则引起的。

char

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;
}

如何在小显示的情况下保持居中图像的滚动

3 个答案: