Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 12 - HTML Responsivo

Imagens responsivas

Nesta videoaula, você verá como trabalhar com imagens responsivas. Ou seja, imagens que se adaptam ao tamanho da tela do dispositivo.

Como visto anteriormente, o HTML5 forneceu mais controle sobre a responsividade do site. Um desses controles veio através da tag <meta name="viewport" content="width=device-width, initial-scale=1.0">. Ao adicionar essa estrutura no cabeçalho do documento HTML, estamos informando ao navegador a escala do viewport, o que gera melhor aparência para diferentes dispositivos.

Para criar imagens responsivas, é importante atentar para alguns detalhes. Por padrão, ao adicionar uma imagem ao HTML, ela é apresentada em seu tamanho real, sem qualquer redimensionamento. Para deixá-la mais responsiva, você pode definir o tamanho da imagem de forma relativa. No entanto, a definição relativa através dos atributos "width" e "heigth", pode gerar perda de qualidade da imagem - quando esta fica é apresentada em um tamanho maior que o real. Para resolver isso, o CSS criou um atributo chamado "max-width", que permite definir o tamanho da imagem relativo, mas respeitando o tamanho máximo real da imagem. Veja no exemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Imagens responsivas</title>
</head>
<body>
  <img src="img/book-large.jpg" style="max-width: 100%" alt="">
</body>
</html>

Outra forma de controlar melhor a imagem, a depender da resolução, é utilizar a tag <picture>, que permite definir diferentes imagens para diferentes resoluções de tela. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Imagens responsivas</title>
</head>
<body>
  <picture>
    <source srcset="img/flower-small.jpg" media="(max-width: 600px)" />
    <source srcset="img/flower-med.jpg" media="(max-width: 1200px)" />
    <source srcset="img/flower-large.jpg" />
    <img src="img/flower-med.jpg" alt="">
  </picture>
</body>
</html>

No exemplo acima, uma imagem (img/flower-small.jpg) é definida para resolução de até 600px, outra (img/flower-med.jpg) para resolução máxima de 1200px e outra(img/flower-large.jpg), para os demais casos.


Versão 5.3 - Todos os Direitos reservados