Ir para conteúdo
Entre para seguir isso  
Igor Augusto

Alternativa para tag picture

Recommended Posts

Bom dia pessoal, estou com um problema para utilizar a tag picture no Safari, pelo que pesquisei o maldito Safari não reconhece a tag... Logo não sei como proceder... Segue código exemplo abaixo:

<picture alt = 'Alt'>
    <source media = '(min-width: 1600px)' srcset = '/img/imagem.jpg'/>
    <source media = '(min-width: 1366px)' srcset = '/img/imagem.jpg'/>
    <source media = '(min-width: 1280px)' srcset = '/img/imagem.jpg'/>
    <source media = '(min-width: 960px)' srcset = '/img/imagem.jpg'/>
    <source media = '(min-width: 768px)' srcset = '/img/imagem.jpg'/>
    <source media = '(min-width: 480px)' srcset = '/img/imagem.jpg'/>
    <source media = '(min-width: 1px)' srcset = '/img/imagem-mobile.jpg'/>
    <img src = '/img/banners/imagem.jpg' alt = 'Alt' title = 'Title'/>
</picture>

A minha intenção é utilizar uma outra imagem quando o tamanho da tela estiver entre 1px e 479px... Já que o Safari me deixou na mão, preciso de outra solução!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, sua unica solução na minha opinião é implementar isso em javascript. Como você bem falou essa tag não é suportado pelo safari. Eu até tentei procurar algum projeto para agilizar o seu trabalho, mas não encontrei nada. Então o jeito é tu partir para o desenvolvimento caso queira dar suporte para esse navegador.

 

Você deverá fazer as verificações de resoluções no JS e alterar o "src" da tag "img" para imagem apropriada.

 

Boa noite, e boa sorte.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por guma.cojogra@gmail.com
      Alguém poderia me ajudar a criar um mapa mental usando css e html?
      procurei na internet mas não consegui entender e não achei nenhum tutorial ou explicação que pudesse utilizar
      quais as propriedades css que devo utilizar para criar as linhas ligando um nó a outro?
       
       
      vou postar uma imagem de exemplo de como deve ficar.

      obrigado
    • Por dayenne
      Olá desenvolvedor.
      Estou com um problema um tanto quanto bobo, porém não consigo resolver!!! Estou gerando um e-mail automático com html onde nele contém um vídeo, a pagina fica toda certinha, porém quando esse e-mail chega ao remetente,ele chega sem a parte do vídeo, onde tem o iframe e afins.
       
       
       
      Código da parte que NÃO vai para o e-mail.
       
      <div style="margin:0; padding:15px 50px 15px 50px; font-family: Arial, Helvetica, sans-serif; color:#8f8871; font-size:18px; line-height:16px; background-color:#FFF; border-top: 1px dashed #ccc" text-align:"center"> <strong>Não tenha dúvidas! Aperta o play e veja como é fácil montar o seu álbum.</strong><span style="padding-left:10px;"> </span> <br> <br> <iframe width="100%" height="315" src="https://www.youtube.com/embed/_wPfz-w2XDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture background-color: #fff;" allowfullscreen> </iframe> </div>  
    • Por edvaldo123
      Olá para todos, preciso de um código em PHP ou HMTL que mostre cotações de moedas, pra colocar em um site de notícias. Vou deixar um link abaixo onde tem exatamente o que preciso, porém queria remover algumas linhas desse código para não identificar seu site de origem.

      http://www.precododolar.com/widgets/cotacao.php
    • Por reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.