Elemento HTML: img | Envato Tuts+Reviltec

O HTML element é um dos primeiros elementos que os desenvolvedores aprendem e é usado para incorporar imagens em documentos da web. É um elemento vazio e contém apenas atributos.

O objetivo principal do O elemento é melhorar o apelo visual e a interatividade das páginas da web, exibindo imagens. Foi criado para atender à crescente necessidade de apresentação de conteúdo gráfico na World Wide Web, que evoluiu para um ambiente rico em multimídia.

Sintaxe

A sintaxe básica do elemento é o seguinte:

1	src="url/to/image.jpg" alt="alternative text">

Exemplo

Aqui está um exemplo de como usar o elemento:

1	src="farm.jpg" alt="A beautiful farm landscape">

Na demonstração incorporada aqui, você verá que a primeira imagem (que tem 500×500px por padrão) estourou além dos limites de seu conteúdo.

elemento.

A segunda imagem, embora tenha width e height atributos definidos no elemento, é fluido e perfeitamente contido em seu elemento pai fixo. O CSS necessário para isso é:

img {
    width: 100%; /* this makes the image width 100% of its containing element */   
    height: auto; /* some browsers need this to make sure the height stays in proportion to the width */
}
    

Por último, a imagem final não foi encontrada pelo navegador, então um ícone de imagem quebrado é mostrado, junto com o texto ALT (alternativo).

<br />

Atributos

O elemento suporta atributos globais e inclui vários atributos adicionais:

src: especifica o endereço da web do arquivo de imagem.
alt: Fornece texto alternativo para acessibilidade.
width: Define a largura da imagem.
height: Define a altura da imagem.
title: adiciona uma dica de ferramenta com informações extras.
srcset: oferece opções de imagem responsivas.
sizes: ajuda a escolher a imagem certa para a janela de visualização.
crossorigin: gerencia solicitações de imagens de origem cruzada.
usemap: Links para mapas de imagens do lado do servidor.
ismap: indica o uso do mapa de imagem do lado do servidor.
referrerpolicy: controla as informações do referenciador enviadas.
decoding: Otimiza a decodificação da imagem.
loading: controla o comportamento de carregamento da imagem.
fetchpriority: fornece dicas sobre a prioridade de carregamento de recursos.

Contente

O o elemento está vazio e não aceita conteúdo ou possui tags de fechamento.

Você sabia?

O alt O atributo é importante para acessibilidade, pois descreve a imagem para quem não consegue vê-la.
Na verdade, você pode estilizar a tag alt de uma imagem usando CSS.
Se o src atributo não está presente, o tag será ignorada.

Saber mais

[ad_2]

Relacionado

Posted by admin

Tagged with

1	img {
2	width: 100%; /* this makes the image width 100% of its containing element */
3	height: auto; /* some browsers need this to make sure the height stays in proportion to the width */
4	}
5