Descrição Responsiva E-Commerce

Crie uma descrição HTML responsiva que se adapta ao dispositivo usado

v.1.6 on 23/11/2023

Usando o elemento <picture>. Clique aqui (JET)

O elemento HTML <picture> é um container usado para especificar múltiplos elementos <source> para um elemento específico <img> contido nele. O navegador irá escolher a imagem mais adequada de acordo com o layout atual da página, características do dispositivo em que será exibido; se não houver correspondência entre os elementos <source>, o arquivo especificado pelo elemento <img> será selecionado. A imagem selecionada é então exibida no espaço ocupado pelo elemento <img>.

Usando o elemento <div>. Clique aqui (Linx, JET)

O elemento de divisão HTML <div> é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica.

Como usar

Escolha o elemento a ser usado e preencha o endereço para uma imagem que irá ser exibida em dispositivos moveis e uma outra imagem que será exibida em computadores. Cada imagem deve ter uma dimensão adequada para se adaptar bem ao dispositivo. O botão Adicionar irá gerar o código HTML automaticamente. Ao adicionar uma nova imagem, um novo código será inserido abaixo do último. A cada adição a visualização é atualizada, e também é possível atualizar manualmente clicando em Visualização. Atenção: caracteres especiais e espaços no endereço da imagem devem ser tratados para uma correta visualização.

Imagens disponíveis para teste:

https://descricao-responsiva-e-commerce.pages.dev/img/frog_mobi_01.jpg

https://descricao-responsiva-e-commerce.pages.dev/img/frog_desk_01.jpg

https://descricao-responsiva-e-commerce.pages.dev/img/frog_mobi_02.jpg

https://descricao-responsiva-e-commerce.pages.dev/img/frog_desk_02.jpg