4

Estou a trabalhar com a tag <picture> para usar sua função responsiva e inserindo diversos tamanhos da mesma imagem num único objeto conforme a resolução da tela pelo parametro "media" da tag <source>. No chrome e no Mozilla Firefox os resultados foram perfeitosm mas nos celulares e IE11 nao funcionou, estão apenas usando a imagem na tag <img> segue um exemplo do erro:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="erro.css">
</head>
<body>
		<a id="capa-individual" href="individual.html">
			<picture>
    			<source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
    			<source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
    			<img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
			</picture>
		</a>
	
</body>
</html>

10
  • O que não funcionou exatamente? Que erro deu, não reconheceu o CSS? Explique melhor.
    – Syzoth
    Commented 19/02/2016 às 3:07
  • Realmente não aparece erros amigos, tudo funciona, mas não do jeito certo, é muito estranho porque estou aqui a testar em varios dispositivos, e em nenhum celular a função "media" da tag <picture> esta funcionando. A foto que aparece nos celulares abaixo de 480px é simplesmente a foto grande que esta na tag <img>. Mas por outro lado no chrome e no Mozilla é perfeitamente funcional, quando ponho o navegador para resolução abaixo de 480px, logo aparece a foto pequena. Já no IE quando ponho o navegar abaixo de 480px, continua a foto grande, nao reconhece o "media". Não sei o que esta acontecendo
    – GOLX
    Commented 19/02/2016 às 13:14
  • Se é um problema com a mediaquery então você deve colocar o css todo, coloque algo que possamos reproduzir. Se você só coloca trechos e fala que o problema é em outro lugar fica difícil entender. Quando falo ERRO não quero dizer mensagem de ERRO e sim pra explicar como deveria funcionar e o que está acontecendo ao invés do esperado. Coloque um código que possamos reproduzir o problema.
    – Syzoth
    Commented 19/02/2016 às 13:53
  • @Guilherme Nascimento Certo, então segue o CSS na integra e o Html da tag picture, ficou um pouco grande mas o erro pode estar em algum lugar no meio disto tudo, eu olhei e olhei e nao achei. Os editei na perguta. Obrigado pela ajuda
    – GOLX
    Commented 19/02/2016 às 15:18
  • quando disse pra colocar um exemplo que possamos reproduzir, era pra você pegar as partes somente necessárias e tentar fazer o mesmo efeito de falha, ficou um CSS gigante que só você entende, recomendo mesmo que com toda atenção leia este link: pt.stackoverflow.com/help/mcve assim fica mais fácil a você nos ajudar a ajuda-lo ;)
    – Syzoth
    Commented 19/02/2016 às 15:49

2 Respostas 2

3

O elemento <picture> não é suportado no Safari para iOS e no IE11. É possível verificar isso em http://caniuse.com/#feat=picture.

Uma alternativa é o uso dos atributos srcset e sizes, onde é possível especificar diferentes imagens para diferentes resoluções. Segundo o Can I use..., o recurso já é amplamente suportado (http://caniuse.com/#feat=srcset).

Exemplo:

<img src="small.png" 
     srcset="large.png 1280w, medium.png 640w, small.png 320w" 
     sizes="(max-width: 500px) 250px, 500px" 
     alt="">

No srcset, você especifica o endereço da imagem e logo após a largurda dela em pixels (1280w). No atributo sizes, é indicado ao browser os breakpoints usando uma media querie e o tamanho que a imagem será exibida. O tamanho (max-width: 500px) 250px, 500px diz ao browser "se a viewport for menor que 500px, a imagem terá 250px de largura. Se maior, a imagem será exibida com 500px de largura. O browser vai escolher qual daquelas imagens melhor se encaixa a essa situação.

4
  • vi o Caniuse e realmente nao é o IE 11 nao suporta a tag, e pelo que vi browser do android tambem não. obrigado. Voce tem alguma sugestão de como posso fazer para apresentar substituir esta função?
    – GOLX
    Commented 24/02/2016 às 10:50
  • Ótima resposta e muito boa alternativa. @GOLX se resolveu marque a resposta como correta.
    – Syzoth
    Commented 24/02/2016 às 14:13
  • sim a resposta do afonso matou o porque. E qual alternativa posso ter para este problema? seria fazer uma img com display:none com a foto menor. E telas menores que 480px (celulares), punha um display:block para a foto pequena e um display:nome para a foto grande? Será essa a melhor alternativa?
    – GOLX
    Commented 24/02/2016 às 18:17
  • @GOLX na própria resposta já apresento uma solução para o problema. Algo mais rudimentar seria exatamente o que você falou: tratar com display:none e display:block. Mas isso faria o navegador carregar as duas imagens, o que deixaria o carregamento da página mais lento.
    – Afonso
    Commented 24/02/2016 às 18:27
3

O elemento picture não é suportado no IE11, você pode consultar quais navegadores suportam ele em: http://caniuse.com/#feat=picture.

O que você pode fazer para que o IE11 suporte ela é usar um polyfill, que são bibliotecas javascripts que simular o comportamento de novas funcionalidades em navegadores antigos:

Um polyfill para o picture poderia ser o : https://scottjehl.github.io/picturefill/

Adicione esse código a sua página para que o picture polyfill funcione:

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js" async></script>
</head>

Exemplo no Codepen: http://codepen.io/anon/pen/OMKqqz

1
  • Muito interessante a biblioteca +1
    – Syzoth
    Commented 24/02/2016 às 14:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .