Using the picture tag showing multiple pictures simultaneously

Question

Using the picture tag showing multiple pictures simultaneously

Navigation

#1 by (2 votes)

1

Hello, I'm having some problems with the tag picture, in this case we use the tag to show images responsively, adapting the image to each device, but if I want to show more than one image simultaneously, it is 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 toggle (or show both pngs over the jpg) just between png's is it possible?

imagem responsivo picture

asked by anonymous 27.12.2017 / 15:00

1 answer

Displaying div with jquery Touch-action what is it for? CSS

score 2 · Accepted Answer

I do not know if it suits you, but you can use a Background image in the Figure tag, and the PNGs above.

I made a very simple model of what I'm talking about. (Also view "All 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 as you want to get complicated, because if they have the same media="(min-width: ;)" one will overwrite the other , and with different values they never go appear at the same time understand.

Another example, now with Two images. Except that I have used two <img> tags with srcset and sizes inside it. The background-image is in the <figure> tag

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 and sizes

link