Na linguagem de marcação de hipertexto (HTML), um comando especial “tag” é usado para exibir uma imagem em uma página. Essa tag é conhecida como img e contém um conjunto de variáveis - "atributos". Com a ajuda de atributos, você pode determinar todos os aspectos da exibição de uma imagem em uma página de hipertexto, incluindo suas dimensões. No entanto, esta não é a única maneira de resolver o problema - você também pode reduzir o tamanho da imagem usando Cascading Style Sheets (CSS).
Instruções
Passo 1
Coloque os atributos de altura e largura na tag responsável por exibir a imagem desejada. Defina o primeiro para o tamanho vertical da imagem e o segundo horizontalmente. Defina os dois números em pixels, mas não há necessidade de indicar unidades - px - aqui. Ao calcular os valores necessários para estes atributos, preste atenção na observância das proporções de redução da imagem, caso contrário ela será exibida de forma distorcida. Por exemplo, para colocar em uma página uma imagem dividida pela metade de um arquivo chamado SomePic.jpg, cujas dimensões iniciais são 500 por 300 pixels, a tag pode ser feita com o seguinte comando:
Passo 2
Você pode definir a redução proporcional das dimensões da imagem original em porcentagem. Para fazer isso, use apenas o atributo de altura sem especificar a largura e adicione um sinal de porcentagem após especificar o número que define o tamanho. Por exemplo, você pode obter o mesmo efeito que no exemplo da etapa anterior com uma tag escrita desta forma:
etapa 3
Se você deseja especificar o tamanho da imagem usando a descrição de estilos, use o mesmo nome de tag - img - e os atributos - largura e altura. Neste caso, as unidades de medida - px, pt ou% - devem ser sempre especificadas. Para definir a redução pela metade do tamanho de absolutamente todas as imagens na página, coloque a seguinte entrada no bloco de descrição do estilo: img {height: 50%;} Se você precisar reduzir o tamanho de apenas uma imagem, adicione um atributo id adicional à sua tag e atribua um único para as imagens deste valor de página - por exemplo, PicOne: Adicione o mesmo valor ao registro de estilo, separando-o com um "hash" # do nome da tag. A descrição completa do estilo neste caso pode ser assim: img # OnePic {height: 50%;}
