Largura da imagem em HTML

Por padrão, as imagens são exibidas em seu tamanho real. Por exemplo, aquela imagem do smile que exibimos acima tem um tamanho real de 130 por 130 pixels e é esse o tamanho da imagem que vemos no navegador.

Se desejar, você pode alterar o tamanho da imagem, definindo uma largura para ela. Isso é feito usando o atributo width.

Vamos, por exemplo, definir a largura da nossa imagem como 100 pixels. Para isso, o valor do atributo width será o número 100, assim:

htmlwidth="100"

Qual será o tamanho da imagem na tela? Poderíamos pensar que será o seguinte: largura de 100 pixels, como definimos, e a altura real de 130, já que não a definimos. Na verdade, não será assim.

A largura realmente será de 100 pixels, mas a altura se ajustará para que as proporções da imagem não fiquem distorcidas, ou seja, também se tornará 100 pixels.

Vamos executar e verificar isso:

html<img src="smile.png" width="100">

Результат: