Formatação de imagens
Imagens Arredondadas
A propriedade “border-radius” pode ser utilizada para criar imagens arredondadas
●img {border-radius: 50%;}
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-199.png)
Imagens Responsivas
Ao definir as propriedades “Width” e “Height” como “auto”, a imagem se ajusta ao tamanho da tela. Há também como definir esta propriedade como uma porcentagem da página.
●“Width:auto”;
●“Height:auto”;
Imagens Trasnparentes
Para alterar a opacidade de uma imagem, usa-se a propriedade “opacity”.
●opacity: 0.5;
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-201.png)
Imagem Invertida
Para inverter uma imagem, utilizamos a propriedade “transform”com o valor “scaleX(-1)”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-202.png)
Galeria de Imagens
Galerias de imagem podem ser criadas personalizando caixas que contém imagens.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-203.png)
Imagens em outros itens
Imagens em links
Para usar uma imagem como um link, você pode definir a imagem como plano de fundo do link, usando a sintaxe em css:
●“background-image: url(localdaimagem.png);” ou
●“background: url(localdaimagem.png);”
imagens em listas
Para especificar uma imagem como marcador de item em uma lista:
●list-style-image: url(‘apple.gif’);
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/06/image-204.png)
Exercícios
Aplique os conhecimentos de imagens abordados na aula para colocar as imagens na página de exercício como apresenta o exemplo.
Arquivos da aula: https://drive.google.com/drive/folders/1nEPs-DCe1yviCjkjDIDzI-sbzJ7VvJYd?usp=sharing