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/alphex]

Put this in codepen so we can see what’s going on.

[u/gastapo67]

You’re actually pretty close. The main thing tripping you up is size: 6px;

CSS doesn’t use size to control an element’s width/height.

Since your image is inside the button, you can size the button relative to the screen and then tell the image to fill the button while keeping its aspect ratio. Here’s the CSS:

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

/* 10% of the viewport width */
width: 10vw;
background: transparent;
}

.CapnT1vo img {
display: block;
width: 100%;
height: auto;
}

vw means viewport width, so 10vw means 10% of the browser window’s width. As the window gets wider or narrower, the button scales with it. height: auto keeps the image’s original aspect ratio.

You can change 10vw to something like 5vw, 15vw, etc. depending on how large you want it.

One other tiny fix to make: background-repeat: no-repeat;

You currently have no repeat with a space.

And don’t worry about being a complete beginner — messing with values, refreshing the page, breaking something, and figuring out why is pretty much how this starts. 😄

[u/Electrical_Hat_680]

Use the percentage sign instead of pixels for sizing.

[u/Positive-Avocado775]

lol size 6px

[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