0

Boa tarde, tenho a seguinte estrutura:

<picture>
   <source media="(min-width:min-width:1440px)" srcset="img/main_banner_info-1440px+.png">
   <source media="(min-width:min-width:660px)" srcset="img/main_banner_info-660px~1439px.png">
    <img src="img/main_banner_info-320px~659px.png" alt="Informações: IdeaBag, central de ideias programadas">
</picture>

Porém, ao rodar no navegador, apenas o elemento <img> é exibido, não importando o tamanho da página, verifiquei as url's e estão todas corretas, porém, não funcionam, testei nas versões atuais do firefox e chrome. Por que este erro ocorre, e como posso corrigí-lo?

1 Resposta 1

3

Você escreveu o conteúdo do atributo MEDIA duas vezes, isso confunde o funcionamento:

min-width:min-width:1440px

Correto:

min-width: 1440px

Acredito que o atributo MEDIA funcione igualmente CSS3, então segue o mesmo padrão pra entender páginas responsivas e a TAG IMG é caso nenhum deste possa ser carregado ou o navegador não suporte essa TAG.

Observação sobre método alternativo:

Fonte: Tag não funciona em celulares e IE11

Se quiser usar mma alternativa é o uso dos atributos srcset e sizes direto na tag img, 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.

2
  • 2 min e dou a resposta, eu to com a cabeça tão cheia que nem percebi :/ Commented 28/02/2018 às 20:39
  • 1
    Editei a resposta por que existe um método alternativo que funciona em mais navegadores.
    – RpgBoss
    Commented 28/02/2018 às 23:11

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 .