Elemento de imagem HTML

No desenvolvimento da web, diferentes técnicas podem ser aplicadas para tornar a página da web em geral responsiva. Mais especificamente, as imagens são adicionadas para melhorar a aparência do site. No entanto, adicionar imagens grandes ou pequenas também pode resultar em alguns problemas de visibilidade em diferentes dispositivos, ou às vezes o formato de imagem não é suportado. Para superar esses problemas, você pode usar a tag html.

Este artigo o guiará sobre o uso do elemento HTML.

O que é elemento html?

Para desenvolvedores da web, o html “”O elemento fornece flexibilidade na especificação de recursos de imagem. Permite inserir um ou mais elementos e um elemento no último. O navegador carrega todas as fotos da e exibe a imagem mais apropriada e, se não encontrar nenhuma correspondência, a imagem especificada na tag será exibida.

Como usar o elemento HTML?

Para usar a tag html, siga a sintaxe dada:

A descrição da sintaxe acima está listada abaixo:

• ““"É a tag de partida e"”É a etiqueta final.
• ““”O elemento contém as versões de uma imagem. Essas versões estão de acordo com os dispositivos de exibição. Além disso, pode haver várias tags em elementos de imagem.
• ““”A tag é usada para fornecer a fonte“src”Da imagem, tamanho e outros atributos.

Vamos verificar o exemplo dado.

Exemplo: como usar imagens com diferentes dimensões em html?

Este exemplo demonstrará como o navegador carrega todas as fotos do elemento de origem e exibe a que é mais apropriada de acordo com o tamanho da tela. Para fazer isso, use três fotos com dimensões diferentes.

Aqui está a lista de imagens com diferentes dimensões colocadas na pasta do projeto:

Agora, vamos ver como essas imagens serão exibidas com diferentes tamanhos de tela.

Em html, primeiro add

tag para cabeçalho. Então, no “”Tag do elemento, adicione várias tags com o caminho das imagens:

Tag de imagem HTML

A descrição da tag mencionada na seção de código fornecida acima é mencionada abaixo:

• ““”É a etiqueta inicial do elemento de imagem.
• ““”A tag é usada para fornecer várias imagens de origem.
• ““meios de comunicação”Atributo define o tipo de dispositivo de mídia ao qual o elemento HTML está vinculado para.
• ““srcset”O atributo é usado para fornecer os URLs de diferentes imagens que precisam ser exibidas.
• ““A tag, no final, é usada quando criança, que fornece a imagem alternativa. Isso significa que se alguma das imagens da tag de origem não puder carregar, a imagem especificada é utilizada como um alternativo.
• ““src”Atributo significa o caminho da imagem alternativa.
• ““alt”O atributo é usado para adicionar texto alternativo para exibir caso a imagem não tenha carregado.
• ““largura”O atributo é utilizado para especificar a largura da imagem em pixels.
• ““”É a etiqueta de fechamento.

Observação: O atributo de mídia especifica os tipos de dispositivos de mídia para os quais o elemento está vinculado.

A saída fornecida abaixo mostra claramente que as imagens são responsivas de acordo com o tamanho da tela do nosso dispositivo. No começo, o “IMG1”Com a dimensão 3047 x 1246, é exibida e quando a tela é arrastada acima de 500px, então“ “IMG3" é exibido. Por fim, quando a dimensão excede 1000px, “IMG2" parece:

É assim que você pode utilizar a tag para tornar as imagens responsivas de acordo com o tamanho da nossa tela.

Conclusão

As imagens desempenham um papel vital em tornar o site atraente. Além disso, para tornar o site mais responsivo, o elemento HTML pode ser usado. Esta tag compreende a tag e a tag utilizadas para fornecer vários recursos de mídia para elementos de mídia, como tags. Este artigo demonstrou o uso do elemento HTML e como as imagens podem ser responsivas de acordo com o tamanho da tela.