A tag de imagem em HTML
A tag de imagem permite aos programadores mais flexibilidade no processamento de imagens.
O uso mais comum da tag de imagem é no design de sites responsivos. Em vez de usar apenas uma imagem para aumentar e diminuir o zoom, dependendo do tamanho da tela de exibição, várias imagens com tamanhos diferentes serão selecionadas para exibição, dependendo do tamanho da tela, tornando-a boa.
A tag de imagem contém dois tipos diferentes de tags: uma tag img e uma ou mais tags de origem.
A tag de origem tem os seguintes atributos:
- srcset(request) – define a URL da imagem a ser exibida.
- media – aceita quaisquer consultas de mídia válidas normalmente definidas em CSS.
- tamanhos – determina o tamanho da imagem exibida.
- Tipo – define o tipo de arquivo.
O navegador usará os valores dos atributos para carregar a imagem mais adequada. A primeira tag de origem que corresponde ao atributo será usada.
A tag img será a última tag filha na tag de imagem. Quando não houver tags de origem correspondentes, a tag img será usada para exibição.
Usando
Exemplo : neste exemplo, usarei a tag de imagem em combinação com as tags de origem e img para criar uma página responsiva que é exibida em vários tamanhos de tela.
Você prepara 3 imagens black.jpg, yellow.jpg e blue.jpg localizadas no mesmo nível do arquivo html com o seguinte conteúdo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Học html miễn phí tại web888.vn</h1> <picture> <source media="(min-width: 800px)" srcset="black.jpg"> <source media="(min-width: 600px)" srcset="blue.jpg"> <img src="yellow.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html>Redimensione a janela do navegador, você verá a imagem mudar de tamanho.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
