-3

Estou tentando criar uma tela de login, na hora de diminuir a imagem ele permanece igual. Tentei por, na classe da imagem, width de 50% mas nada mudou, segue o codigo:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="principal">
            <section class="principal__um">
                <img class="imagem" src="./assets/phone.png" alt="Foto de Pessoa usando o celular">
                <h1>Comece de graça e consiga enormes vantagens.</h1>
            </section>
            <section class="principal__dois">
                <h2>Faça seu cadastro</h2>
                <div class="login">
                    <p>Já tem uma conta? </p>
                    <p>Login</p>
                </div>
                <div>
                    <a href="#">Faça login com Google</a>
                <a href="#">Faça login com Facebook</a>
                </div>
                <p> ou </p>
                <form action="#">
                    <label for="email"></label>
                    <input type="text" name="email" id="">
                </form>
                <form action="">
                    <label for="password"></label>
                    <input type="hidden" name="password">
                </form>
            </section>
    </main>
    
</body>
</html>

CSS:

.principal{
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid;
    height: 100vh;


}

.principal__um{
    border: solid;
}


    .imagem{
        height: 50%;
    }
    
    
    .login{
        display: flex;
    }
2
  • é que na classe pai principal__um não especificou a altura, e a classe imagem ta seguindo essa especificação. Se colocar o height na classe principal__um deve resolver o tamanho, .principal__um{border: solid; height: 100%;} Commented 9/04/2023 às 1:36
  • Por favor, esclareça seu problema ou forneça detalhes adicionais a fim de destacar exatamente o que você precisa. Da forma como está escrito atualmente é difícil dizer com exatidão o que você está perguntando.
    – Comunidade Bot
    Commented 9/04/2023 às 2:38

3 Respostas 3

-2

Olá, segue uma sugestão de forma de regular o tamanho da imagem.

1º Crie uma "div" com as especificações desejadas de tamanho.

2º Atribua uma classe tipo "div-img".

3º No CSS, atribua as seguintes propriedades:

.div-image {
  background-image: url(' Insira o caminho para imagem... ');
  background-size: cover;
  background-repeat: no-repeat;
}

Consiste em transformar uma div em imagem, dessa forma você pode usar as propriedades de manipulação de div á uma imagem.

Essa é uma das muitas formas possíveis, espero ter ajudado :)

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 11/04/2023 às 13:04
-2

Bom dia! Para diminuir a imagem, você deve colocar ela em uma div, e definir alutura e largura da div contendo a imagem. Aconselho apenas definir a largura, pois a altura já se adapta de acordo com a largura.

-3

Vamos supor que vc queira que a imagem tenha 50% de largura e altura tente fazer assim:

 .imagem{
    width: 50%;
    height: 50%;
    object-fit: contain;
  }

ou se desejar que a imagem ocupe o seu container todo sem prejudicar a qualidade

  .imagem{
    width: 50%;
    height: 50%;
    object-fit: cover;
  }

Esse doc tem mais detalhes sobre o uso do object-fit em imagens

1
  • 2
    Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 31/10/2023 às 17:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .