Responsive Image: Main

Ready

HTML
View
Context
Info
Notes


        
        <figure>
    <img srcset="https://via.placeholder.com/320x240 320w,
            https://via.placeholder.com/480x360 480w,
            https://via.placeholder.com/640x480 640w, 
            https://via.placeholder.com/752x564 752w, 
            https://via.placeholder.com/960x720 960w" sizes="(max-width: 59em) 90vw, (max-width: 105em) 50vw, 960px" src="https://via.placeholder.com/960x720" alt="A referee uses the we.ref app during a football match at Broadwood Stadium near Glasgow">
    <figcaption>We.Ref app in action. Photo by Bob Smith.</figcaption>
</figure>


        <figure>
    <img srcset="https://via.placeholder.com/320x240 320w,
            https://via.placeholder.com/480x360 480w,
            https://via.placeholder.com/640x480 640w, 
            https://via.placeholder.com/752x564 752w, 
            https://via.placeholder.com/960x720 960w" sizes="(max-width: 59em) 90vw, (max-width: 105em) 50vw, 960px" 
            src="https://via.placeholder.com/960x720" alt="A referee uses the we.ref app during a football match at Broadwood Stadium near Glasgow">
    <figcaption>We.Ref app in action. Photo by Bob Smith.</figcaption>
</figure>


        
            
            /* No context defined for this component. */

Handle: @responsive-image--main
Variants (5): Default , Full , Left , Main , Right
Preview:
- With layout
- Component only
Filesystem Path: src/fractal/components/responsive-image/responsive-image--main.hbs

There are no notes for this item.