Uma imagem responsiva é aquela que consegue se adaptar a diferentes dispositivos, independente do tamanho da tela. Ter uma imagem responsiva no site tornou-se muito importante hoje em dia. Porque não apenas acelera o site, mas também oferece uma experiência interessante ao usuário em todos os dispositivos. As imagens responsivas também serão redimensionadas redimensionando o navegador.
As imagens responsivas se adaptam com eficiência a diferentes tamanhos de tela em diferentes dispositivos. Isso garante que a qualidade seja mantida. Um site responsivo com imagens responsivas certamente aumenta o engajamento e as taxas de conversão. As imagens podem se tornar responsivas usando CSS junto com consultas de mídia.
Este artigo usará HTML e CSS para tornar as imagens responsivas.
Como tornar as imagens responsivas com HTML e CSS?
Para tornar as imagens responsivas usando HTML e CSS, siga as etapas abaixo:
Método 1: use a propriedade “largura máxima”
O primeiro método para tornar uma imagem responsiva é usar o “ largura máxima ' propriedade. O ' largura máxima ”A propriedade é usada para definir a largura máxima da imagem. Caso o conteúdo ultrapasse a largura máxima, a altura do elemento será alterada.
Criar HTML
Para adicionar um arquivo de imagem na tag
do HTML, os usuários precisam usar a tagAdicionar CSS
Agora, crie um arquivo CSS externo e salve-o com a extensão “. css ”Extensão de arquivo e vincule-o dentro da tag
do arquivo HTML. Para estilizar o arquivo de imagem no arquivo CSS, comece com a tag img e abra as chaves. Em seguida, dentro da chave, adicione o “ largura máxima: 100% ;” para ajustar a imagem horizontalmente dentro do contêiner. Além disso, evitará que as imagens sejam cortadas. Depois disso, adicione “ altura: automático ;” para ajustar a altura automaticamente, para que a imagem seja exibida corretamente:imagem {
largura máxima : 100% ;
altura : auto ;
}
Redimensione a janela do navegador para verificar como a imagem é dimensionada.
Método 2: use a propriedade “largura”
Outro método para tornar uma imagem responsiva é utilizar a propriedade “ largura ”. A propriedade ' largura ”Define a largura das imagens e do texto. Não contém margens, preenchimento ou bordas. Ele pode definir o tamanho das imagens e do texto no formato cm, px ou%. Para tornar uma imagem responsiva, basta atribuir o “ largura ”propriedade para“ 100 %”. Contexto ' largura: 100% ;” significa que torna a imagem tão grande quanto o elemento pai:
imagem {largura : 100% ;
altura : auto ; }
O acima confirma que a imagem responde. Para verificar se ele responde ou não, basta redimensionar a janela do navegador.
Método 3: aplicar consultas de mídia
As consultas de mídia CSS ajudam os usuários a modificar a aparência de uma página da web. A consulta de mídia CSS contém condições; sempre que essas condições forem atendidas, a aparência do dispositivo ou navegador será alterada. As consultas de mídia também podem ajudar os usuários a tornar as imagens responsivas. Por esse motivo, primeiro especifique o “@ meios de comunicação ”E, em seguida, especifique o“ largura máxima ”Propriedade e atribua a largura máxima para uma imagem entre colchetes. Sempre que essa condição for atendida, a imagem responderá. Depois disso, adicione as chaves, especifique a tag img e especifique o “ largura: 100% ;” valor:
@meios de comunicação ( largura máxima : 480px ) {imagem {
largura : 100% ;
}
}
Observação : a imagem só responderá se atender à condição especificada.
A consulta de mídia CSS foi aplicada e agora a imagem se comportaria como responsiva se fosse redimensionada para o tamanho de imagem especificado. Caso contrário, não responderá:
Conclusão
Para tornar as imagens responsivas com HTML e CSS, os usuários têm vários métodos. Esses métodos incluem tornar as imagens responsivas usando “ largura máxima ' propriedade, ' largura ”Propriedade e também aplicando a consulta de mídia CSS. Este artigo apresentou aos usuários a solução completa para tornar as imagens responsivas.