Статический логин и пароль html/css

Question

проблема заключается в том что когда я приближаю веб сайт рулеткой мыши, логин и пароль выходят за рамки .

Нужно оставить строки статическими, то есть чтобы при приближение они не менялись и оставались как на первой картинке, в том же положении.


<body>
    <div id="principal">
        <img id="fondo">
        <img id="logo" src="./images/logo.png" >
        <div id="registro">
          <span>login</span>
          <textarea id="login" rows="1" maxlength="20" ></textarea>
          <br>
          <span>password</span>
          <textarea id="password" rows="1" maxlength="20" ></textarea>
        </div>
    </div>
</body>

#principal {
    position: fixed;
    margin:auto;
    width: 100%;
    height: 20%;
    left: 0%;

}
#fondo {
    position: fixed;
    width: 100%;
    height: 20%;
    background: url(../images/principal.jpg); 
    background-size: cover;
    background-size: cover;
    background-position: center center;
    z-index: -1;
    top: 0;
    left: 0;
}

#registro{
    background-size: cover;
    position: fixed;
    width: 10%;
    height: 8;
    left: 85%;
    bottom: 81%;
    top: 2%;
}

Answer 1

Для начала я посоветовал бы вам поменять теги textarea на соответствующие input type="text" и input type="password".

Для того что бы при приближении поля не меняли свой размер, укажите их ширину в единицах vw(view width), а высоту в единицах vh(view height). Как-то так: height: 6vh; width: 20vw;

Эти единицы измерения зависят только от видимой области экрана и при приближении они не будут изменятся.

Upd. Вот так это выглядит на практике, кроме того что я писал выше пришлось использовать еще 2 вещи: во первых, выставить все margin и padding по умолчанию в 0, во вторых, убрать из html разметки тэг br, весомой роли он не отыгрывает, но по видимому имеет определенную высоту в пикселях и при зуме раздвигает инпуты, и так же задать блоку #registro фиксированную высоту дисплей flex и выравнивание элементов по центру по вертикали. Теперь все работает, можете сами в этом убедиться.

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 #registro {
  width: 20vw;
  height: 10vw;
  display: flex;
  flex-flow: column;
  justify-content: center; 
  margin-left: auto;
  margin-right: auto;
  margin-top: 7vw;
}
.input {
  width: 20vw;
  height: 2.5vw;
  padding: 0.5vw;
}
span {
  font-size: 2vw;
}

    <body>
        <div id="principal">
            <div id="registro">
              <span>login</span>
              <input type="text" id="login" class="input">
              <span>password</span>
              <input type="password" id="password" class="input">
            </div>
        </div>
    </body>

БЛОГ НА HUSL

Статический логин и пароль html/css

Ответы (1 шт):