Using the picture tag showing multiple images simultaneously

Question

Using the picture tag showing multiple images simultaneously

Hello, I'm having some problems with the picture tag, in case we use the tag to show images in a responsive way, adapting the image to each device, but what if I want to show more than one image simultaneously, is it possible with this 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>

Display the jpg constantly, and switch (or show both PNG's over the jpg) only between PNG's is it possible ?

1

imagem responsivo picture

Author: Murilo Melo, 2017-12-27

Source

1 answers

score 2 · Accepted Answer

I don't know if it suits you, but you can use a background image in the figure tag, and the PNGs on top.

I made below a very simple model of what I'm talking about. (also display "full page" to see changing images.)

.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>

Use two .png at the same time the way you want it gets complicated, because if they have the same media="(min-width: ;)" one will overwrite the other, and with different values they will never appear at the same time understands.

Another example, now with two images. Only I used two tags <img> with the srcset and sizes inside it. The background-image is in the 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>

I also suggest reading these two articles to better understand the srcset e sizes

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

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