add new API fxSrc for responsive features Image element #81

Open
ThomasBurleson opened this Issue Jan 4, 2017 · 0 comments

Projects

None yet

1 participant

@ThomasBurleson
Collaborator
ThomasBurleson commented Jan 4, 2017 edited

Similar to responsive features in the picture element

<picture>
  <source  media="(min-width: 650px)"    srcset="images/kitten-stretching.png">
  <source  media="(min-width: 465px)"    srcset="images/kitten-sitting.png">
  <img  src="images/kitten-curled.png"  alt="a cute kitten">
</picture>

or 

<picture>
  <source media="(min-width: 800px)"
          sizes="80vw"
          srcset="lighthouse-landscape-640.jpg 640w,
                  lighthouse-landscape-1280.jpg 1280w,
                  lighthouse-landscape-2560.jpg 2560w">
  <img src="lighthouse-160.jpg" alt="lighthouse"
       sizes="80vw"
       srcset="lighthouse-160.jpg 160w,
               lighthouse-320.jpg 320w,
               lighthouse-640.jpg 640w,
               lighthouse-1280.jpg 1280w">
</picture>

``

Enable adaptive layouts with:

```html
<img 
     fxSrc="images/kitten-curled.png" 
     fxSrc.xs="images/kitten-sitting.png"
     fxSrc.sm="images/kitten-stretching.png"
/>

<!-- Or use SrcSet to wrap image in `<picture>` with `<source>` entries -->
<img 
     [fxSrcSet]="srcSet1" 
     [fxSrcSet.gt-sm]="srcSet2"
/>

see https://www.html5rocks.com/en/tutorials/responsive/picture-element/

@ThomasBurleson ThomasBurleson changed the title from add responsive features Image element with the *fxSrc* directive to add new API fxSrc for responsive features Image element Jan 4, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment