Eu sei que a maioria dos meus ilustres visitantes já conhecem melhor do que eu essa dica, portanto me poupem de ser acusado de pedantismo.  Então, quem já sabe, pode pular esse post. Dar uns pulinhos de vez em quando faz bem para a saúde e para o espírito. Mas acontece que com certa freqüência vejo  páginas (principalmente de blogs) com fotos que não cabem na tela. E é uma tarefa  muito fácil alterar seu tamanho sem precisar editar as fotos ou as imagens que extrapolam os limites da tela. Mais fácil que roubar doce de criança. É assim, ó: quando o garoto estiver distraído, você vai por trás, bate a mão no lado direito do ombro dele, e quando ele virar a  cabeça, você, pelo lado esquerdo, passa a mão no doce e cai fora. Deixa ele chorar.

Mas, como eu ia dizendo, é ruim ver fotos ou imagem maior do que o espaço da tela. A pessoa coloca uma foto deeeeeeeesssste tamanho. Aí você tem que ficar rolando a tela para ver partes da foto. Vê a orelha da pessoa, mas não consegue ver o nariz. Aí vai ver o nariz, mas não vê a boca....

Isso acontece porque o monitor do computador normalmente está regulado para mostrar uma área de 800 x 600 pixels, e a foto apresentada tem dimensões maiores do que essa. Por isso,  e tão-somente por isso, ela não vai caber toda na tela (para ver o tamanho da foto, basta clicar com o botão direito do mouse sobre ela e escolher PROPRIEDADES. Vão aparecer todas as informações sobre ela: o nome do arquivo, o tamanho, o servidor onde ela está localizada etc). Pixel é cada pontinho que forma a imagem, e o primeiro número indica a largura (comprimento horizontal), o segundo a altura da imagem (comprimento vertical). Assim, uma foto de 400 x 300 pixels vai ocupar só a metade da tela na horizontal (primeira dimensão) e só a metade da  tela na vertical (segunda dimensão).

Pois bem, para reduzir uma foto que é maior do que o espaço da tela, basta alterar seu tamanho com um simples comando. As imagens são apresentadas na tela através da tag <img>. Este comando tem alguns parâmetros, como o src, que aponta para onde está a imagem e o nome dela (ou seja, o caminho que o navegador deve percorrer para encontrar a foto e mostrá-la ao internauta. Um caminho que vai dar no servidor e na imagem,  tipo assim:

<img src="http://www.blogger.com.br/foto.jpg">.

O comando img avisa ao navegador que vai aparecer uma imagem e o src fala para ele onde ela está, para que ele possa mostrála na tela (screen, em inglês, entendeu?). Ás vezes, - e é isso que interessa! - aparecem mais dois parâmetros, o width e o height, indicando respectivamente a largura e a altura da imagem, em pixels, assim:

<img src="http://www.blogger.com.br/foto.jpg" width="400" height="300">.

É aqui que está o pulo do gato.  Para reduzir ou aumentar o tamanho da imagem, basta alterar a largura dela (width) para mais ou para menos, apagando o parâmetro height, isso porque, se você não apagar o parâmetro "height", você vai ter que também alterar seu valor na mesma proporção com que aumentou ou diminuiu o valor de "width", senão vai distorcer a imagem, mané. Sem height, a proporcionalidade  é feita automaticamente.

Então, se você quer uma imagem de 60 pixels de largura, basta escrever mais ou menos assim:

<img src="http://...minha_foto.jpg" width=60>

Se quiser de 100:

<img src="http://...minha_foto.jpg" width=100> 

Só mais uma coisinha: O tamanho físico da foto não vai ser alterado. Se a foto tiver 500 milhões de Megabytes, ela continuará com esse tamanho, embora apareça na tela maior ou menor que seu tamanho original.

Falei?