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;
}
