1

Olá, estou tendo alguns problemas com a tag picture, no caso, utilizamos a tag para mostrar imagens de forma responsiva, adaptando a imagem para cada dispositivo, mas e se eu quiser mostrar mais de uma imagem simultaneamente, é possível com essa tag ?

Ex:

<figure class="item">
   <picture>
      <source srcset="cloud.png" media="(min-width:768px)" />
      <source srcset="children.png" media="(min-width:450px)" />
      <img src="bg.jpg" alt="imagem de fundo do banner" />    
   </picture>
</figure>

Exibir o jpg constantemente, e alternar (ou mostrar ambos os png's por cima do jpg) apenas entre os png's é possível ?

1
  • 1
    Achei a pergunta meio confusa, mas tentei responder abaixo. Se não te atender. Tente explicar melhor o que precisa.
    – hugocsl
    Commented 27/12/2017 às 14:55

1 Resposta 1

2

Não sei se te atende, mas vc pode usar um Background imagem na tag Figure, e os PNGs por cima.

Fiz abaixo um modelo bem simples do que estou falando. (Exiba também "Página Toda" para ver mudando as imagens.)

.item {
    background: url(http://placecage.com/600/200) no-repeat;
    background-size: cover;
    padding: 10px;
    position: relative;
    display: flex;
}
picture {
    margin: auto
}
<figure class="item">
  <picture>
     <source srcset="https://cdn.sstatic.net/Sites/br/img/sprites.svg?v=554232ea0d79" media="(min-width:768px)" />
     <source srcset="https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w170" media="(min-width:450px)" />
     <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />    
  </picture>
</figure>

Usar dois .png ao mesmo tempo da forma que vc quer fica complicado, pq se eles tiverem o mesmo media="(min-width: ;)" um vai sobrescrever o outro, e com valores diferentes eles nunca vão aparecer ao mesmo tempo entende.

Outro exemplo, agora com Duas imagens. Só que são usei duas tags <img> com o srcset e sizes dentro dela. O background-image está na tag <figure>

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.item {
    background: url(http://placecage.com/600/400) no-repeat;
    background-size: cover;
    padding: 10px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60%;
}
img {
    margin: auto;
}
<figure class="item">
    <picture>
        <!-- <source srcset="no.png" 
        media="(min-width:400px)" 
        /> -->
        <!-- <img src="http://placecage.com/300/300" alt="imagem de fundo do banner" />     -->

        <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png"
            srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-512.png 800w,
            https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-256.png 400w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png 200w"
            sizes="(min-width: 33%) 33.3vw,
                    50vw"
            alt="A rad wolf" />

        <img src="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png"
            srcset="https://cdn4.iconfinder.      com/data/icons/icocentre-free-icons/137/f-check_256-512.png 800w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-256.png 400w,
                    https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png 200w"
            sizes="(min-width: 33%) 33.3vw,
                    50vw"
            alt="A rad wolf" />

    </picture>
</figure>

Sugiro também a leitura desses dois artigos para entender melhor o srcset e sizes

https://ericportis.com/posts/2014/srcset-sizes/

https://bitsofco.de/the-srcset-and-sizes-attributes/

4
  • então, mas queria deixar os dois png's por cima da imagem Commented 27/12/2017 às 15:01
  • 1
    @MuriloGambôa atualizei a resposta com mais uma opção e uns artigos de referência.
    – hugocsl
    Commented 27/12/2017 às 17:04
  • não entendi muito bem como funciona o "sizes" Commented 27/12/2017 às 18:44
  • 1
    @MuriloGambôa foi por isso que eu coloquei os artigos de Referência. Mas da uma olhada no YouTube que lá tb tem bastante material sobre o assunto. Pesquise por Imagem Responsiva
    – hugocsl
    Commented 27/12/2017 às 19: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 .