Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Other › Picture element: specify different fallbacks at different media queries

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • October 27, 2015 at 8:52 am #210224
    zaxxon_32
    Participant

    Hi,

    I’m currently attempting to use the picture element along with picturefill to display my main svg logo with a png fallback, but I’m having trouble working out how to provide a different fallback for each image which is loaded at certain breakpoints.

    A few months back there was a great article on this site regarding SVG fallbacks: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/
    On this page under the ‘Picture/Picturefill’ section it states ‘Advantages: Not only can you get fallback images, you can specify different fallbacks at different media queries, as part of the picture syntax. Meaning differently sized fallbacks for different screens, art direction, etc.’

    Does anybody know how to achieve this?
    Here’s my code:

    <picture>
    <source type="image/svg+xml" srcset="img/logo.svg" media="(min-width: 800px)">
    <source type="image/svg+xml" srcset="img/logo-small.svg" media="">
    <img src="img/logo-small.png" alt="logo">
    </picture>

    So how would i provide a fallback for logo.svg?

    Thanks :)

  • Author
    Posts
Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.