Atributo width
O atributo width define a largura da imagem,
que é especificada pela tag
img.
Atualmente, este atributo é permitido
apenas para imagens,
iframe,
video
e algumas outras tags.
É permitido especificar valores em pixels ou porcentagem. No caso de definir o tamanho em porcentagem, ela será calculada a partir da largura do elemento pai. No caso de definir o tamanho em pixels, as unidades de medida não são especificadas.
Se para uma imagem não for definida nem a largura, nem a altura - a imagem terá seu tamanho real. Se a altura for definida - a imagem terá a altura especificada, e a largura se ajustará para que suas proporções não sejam distorcidas. Se apenas a largura for definida - analogamente, a imagem se ajustará na altura para manter as proporções. Se both a largura e a altura forem definidas - as proporções da imagem podem ser distorcidas (ou não, como você pode imaginar). Se a largura ou a altura (ou ambas juntas) forem maiores que o tamanho real - a imagem será ampliada, mas perderá qualidade.
Recomenda-se definir a largura e a altura das imagens nos atributos - neste caso, o navegador carregará as imagens mais rapidamente - ele não precisa calcular o tamanho de cada imagem após obtê-la.
Não é recomendado reduzir os tamanhos
reais da imagem sem necessidade. Por exemplo,
o tamanho real da imagem é 1000 por 1000
pixels, e você define uma largura de 100px.
Neste caso, a imagem na tela aparecerá
com 100 pixels, mas terá o tamanho
completo de mil e, consequentemente, carregará
muito mais lentamente.
Para ver exemplos de uso, consulte:
a tag img.
