Estilizando imagens

Atributos de dimensão

As dimensões das imagens podem ser definidas através de atributos CSS. Para definir a largura utilize o atributo "width" e para definir a altura, utilize o atributo "height".

img {
  height: 400px;
}

No exemplo acima, todas as imagens passarão a ter a altura de 400px. Para manter a proporção original das imagens a largura será automaticamente calculada.

Além da definição de tamanho absoluto, é possível definir a largura ou a altura através de valores relativos. Nesse caso, a imagem ocupará uma parte da área disponível. Veja o exemplo:

Caso você defina a largura e a altura manualmente, a proporção da imagem pode ser alterada gerando distorções.

img {
  width: 40%;
}

No exemplo acima, a imagem ocupará 40% da largura disponível. Perceba que a largura disponível dependerá do local em que a imagem estiver no documento.

Atributos de posição

Você pode posicionar a imagem à esquerda ou à direita, de forma flutuante, através do atributo "float". Esse atributo permitirá que o restante do conteúdo da página se adapte à imagem.

Para que a imagem flutue à esquerda, utilize o seguinte trecho de código:

img {
  float: left;
}

Similarmente, você pode optar para que a imagem flutue à direita:

img {
  float: right;
}

Atributos de espaçamento

É comum precisar adicionar margem às imagens para adicionar espaçamento do conteúdo em relação à imagem. Para isso, utilize o atributo "margin".

Como exemplo, considere o código abaixo que adiciona margem de 10px a todos os lados das imagens:

img {
  margin: 30px;
}

Você pode especificar também apenas alguns lados para adicionar margem. Nesse caso, utilize os atributos "margin-top", "margin-right", "margin-bottom" e "margin-left".

img {
  margin-left: 30px;
}

O exemplo acima adiciona margem de 30px apenas ao lado esquerdo da imagem.