As imagens são elementos fundamentais em páginas Web e o CSS permite controlar sua aparência, tamanho, posicionamento e comportamento.
Uma boa formatação garante imagens responsivas, organizadas e visualmente profissionais.
| Propriedade | Função |
|---|---|
| width | Define largura. |
| height | Define altura. |
| max-width | Controla responsividade. |
| border-radius | Arredonda bordas. |
| object-fit | Controla preenchimento. |
A propriedade width controla a largura.
img {
width:300px;
}
A imagem terá sempre 300 pixels de largura.
A propriedade height controla a altura.
img {
height:200px;
}
Uma prática profissional é utilizar largura máxima de 100%.
img {
max-width:100%;
height:auto;
}
A imagem se adapta ao tamanho da tela.
img {
display:block;
margin:auto;
}
O elemento precisa ser tratado como bloco.
Podemos adicionar bordas utilizando CSS.
img {
border:2px solid black;
}
A propriedade border-radius cria cantos arredondados.
img {
border-radius:10px;
}
Para imagens circulares:
img {
border-radius:50%;
}
A propriedade box-shadow adiciona profundidade.
img {
box-shadow:0 4px 8px gray;
}
A propriedade object-fit controla como a imagem ocupa o espaço.
| Valor | Função |
|---|---|
| cover | Preenche mantendo proporção. |
| contain | Mostra toda a imagem. |
| fill | Estica a imagem. |
img {
object-fit:cover;
}
Podemos controlar o posicionamento usando:
object-position:center;
| Valor | Posição |
|---|---|
| center | Centro. |
| top | Superior. |
| bottom | Inferior. |
A propriedade opacity controla transparência.
img {
opacity:0.7;
}
img:hover {
opacity:0.8;
}
Muito utilizado em galerias e interfaces modernas.
.card img {
width:100%;
border-radius:8px;
}
Técnica comum em layouts profissionais.
| Erro | Problema |
|---|---|
| Largura fixa exagerada | Quebra em celulares. |
| Distorcer proporção | Imagem deformada. |
| Arquivo pesado | Página lenta. |
.imagem {
width:100%;
max-width:600px;
height:auto;
border-radius:15px;
box-shadow:0 5px 10px #999;
}
| Propriedade | Função |
|---|---|
| width | Largura. |
| height | Altura. |
| border-radius | Cantos arredondados. |
| object-fit | Ajuste da imagem. |