Principais Propriedades
  • width / height: Define larguras e alturas fixas (px, em) ou relativas (%).
  • max-width: Define a largura máxima permitida.
  • object-fit: Controla como a imagem se ajusta ao seu contêiner (cover, contain, fill).
  • aspect-ratio: Mantém a proporção desejada, ex: aspect-ratio: 16 / 9;
 
1. Redimensionando Imagens HTML
(Tag <img>)
A forma mais comum de ajustar imagens no conteúdo é definindo sua largura e permitindo que a altura seja automática, garantindo a proporção:
 
css
img {
  width: 300px; /* Largura fixa */
  height: auto; /* Altura proporcional */
}
 
2. Imagens Responsivas (Se ajustam ao tamanho da tela)
Para garantir que a imagem não fique maior que seu contêiner (ex: no celular), use porcentagem:
css
.container img {
  max-width: 100%; /* A imagem nunca passa do tamanho da div pai */
  height: auto;
}
 
3. Imagens de Fundo (Background)
Para imagens aplicadas no CSS (background-image), utilize background-size:
 
  • cover: A imagem cobre todo o elemento, podendo ser cortada.
  • contain: A imagem aparece inteira, sem cortar, mas pode deixar espaços vazios.
css
.minha-div {
  background-image: url('imagem.jpg');
  background-size: cover; /* Ou 'contain' */
  background-position: center;
}

AnteriorPróximo