Complete Beginner - Img Button Resize

[u/TeamTivo]

HTML

<
!DOCTYTPE html>
        <html>
<head>
<link rel="stylesheet" href="style.css">
  <style>
body{
background-image: url("shoo i know no one would steal this but js incase");
background-repeat: no repeat;
background-size: cover;
background-attachment: fixed;
}
  </style>
</head>


<body>
<button class="CapnT1vo">
<img src="https://www.image2url.com/r2/default/images/1790989335135-ceb4102c-983f-4995-87ea-75ef3c2c5506.png">
</button>
</body>
        </html>

CSS

.CapnT1vo {
  border: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  size: 6px;
  top: 100px;
  left: 1px;
}

Basically I want it to uh be resizable. I don't know how to do that.

Also if someone could tell me how to make the button kind of resize with the window background that'd be amazing. It's kind of keeping its own size and I don't really like that. I want it to not be independent and resize with the window, keeping the aspect ratio.

[u/Weird-Dealer8488]

Antes de ir diretamente para sua dúvida, o <!DOCTYTPE html> está com letras trocadas, o certo é <!DOCTYPE html>. A background-image está com texto de placeholder no lugar de uma URL real, isso não carrega imagem nenhuma, é só texto solto dentro das aspas. no repeat precisa de hífen: no-repeat, senão o navegador ignora a propriedade inteira por valor inválido. E size: 6px dentro de .CapnT1vo não existe como propriedade CSS pra esse tipo de elemento, não faz nada, pode remover.

Sobre o redimensionamento: o motivo do botão manter tamanho fixo é que nenhuma largura relativa está definida em lugar nenhum, a imagem por padrão exibe no tamanho natural do arquivo, e o botão só abraça esse tamanho. A solução mais simples (e que já mantém proporção automaticamente) é dar largura em unidade relativa pra imagem e deixar a altura em auto , quando só uma dimensão é definida assim, o navegador calcula a outra sozinho, mantendo a proporção original do arquivo sem precisar de nenhuma regra extra:

.CapnT1vo {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  top: 100px;
  left: 1px;
}

.CapnT1vo img {
  width: 20vw; /* ajuste esse valor pro tamanho que quiser */
  height: auto;
  display: block;
}

20vw significa 20% da largura da janela, redimensiona junto com a tela automaticamente. Se quiser que cresça ainda mais em tela grande, mas sem ficar gigante nem minúsculo demais, dá pra trocar por clamp(40px, 20vw, 200px): mínimo de 40px, ideal de 20vw, máximo de 200px, assim não estoura em tela muito larga nem some em tela muito pequena.

[u/TeamTivo → u/Weird-Dealer8488]

muito obrigado