Width size dont work in my pessoal project-CodePudding

I am trying to do a Login Screen, but i have an error that i can't fix

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login {
  display: block;
  width: 50%;
  height: 100vh;
  border-radius: 10px;
  float: left;
  text-align: center;
  overflow: hidden;
}

.image-responsive {
  width: 50%;
  float: left;
}

.img-login {
  width: 100%;
  height: 100vh;
}

<div >
  <div >
    <img  src="../assets/login.jpg" alt="">
  </div>
  <div >
    <img  src="../assets/envolti-dark.png" alt="envolti">
    <h1 >Bem-vindo</h1>
    <h3 >Falta pouco para matar sua fome!</h3>
    <button type="button"  (click)="authService.GoogleAuth()">Login com o Google</button>
    <br>
    <br>
    <p >----------------------------------</p>
    <p> OU FAÇA LOGIN COM UM E-MAIL </p>
    <p >----------------------------------</p>
    <br>
    <br>
    <div >
      <p ><b>Endereço de E-mail:</b></p>
      <br>
      <input  type="email" placeholder="Entre com seu endereço de e-mail" #userName required>
      <br>
      <br>
      <p ><b>Senha:</b></p>
      <br>
      <input  type="email" placeholder="Entre com sua senha" #userPassword required>
      <a  routerLink="/forgot-password">Esqueci minha Senha</a>
      <br>
      <br>
      <br>
      <br>
      <button  (click)="authService.SignIn(userName.value, userPassword.value)">Login</button>
      <br>
      <br>
    </div>
    <p >Não tem uma conta? <a  routerLink="/register-user"> Cadastre-se</a></p>
  </div>
</div>

but my result is not expected, the image dont occupy 50% of my screen, so anyone can help me?

Result of this code: Login Screen Image

CodePudding user response：

It's because of the CSS box module when you put width 50% in the login div, you tell CSS that you want it to occupy 50% of its parents.

Use width 100% to solve it.

You can use the screen as a reference too, using width 50vv

CodePudding user response：

proplem is:

 <div >
    <img  src="../assets/login.jpg" alt="">
  </div>

you gave to class 'image-responsive' 50% width, and to image in that div width 100%, so your image uses 100% width of 'image-responsive' div, which is 50% if you want to make your image less you need to make your img or image-responsive width less