Styleguide

Picture 

<picture>
    <source media="(min-width: 1200px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-xl.jpg" type="image/jpeg" />
    <source media="(min-width: 960px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-lg.jpg" type="image/jpeg" />
    <source media="(min-width: 767px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-md.jpg" type="image/jpeg" />
    <source media="(min-width: 200px)" srcset="/STATIC/binary/images/global/TIMOCOM-warehouse-header-sm.jpg" type="image/jpeg" />

    <img src="/STATIC/binary/images/global/TIMOCOM-warehouse-header-xl.jpg" alt="Lagerflächen suchen und anbieten – europaweit" class="img-fluid" width="100%" />
</picture>
 
<picture>
  {{#each source}}
    <source media="{{media}}" srcset="{{srcset}}" type="{{type}}" />
  {{/each}}

  <img src="{{img.src}}" alt="{{img.alt}}" class="img-fluid" width="100%" />
</picture>
 
{
  "source": [
    {
      "media": "(min-width: 1200px)",
      "srcset": "/STATIC/binary/images/global/TIMOCOM-warehouse-header-xl.jpg",
      "type": "image/jpeg"
    },
    {
      "media": "(min-width: 960px)",
      "srcset": "/STATIC/binary/images/global/TIMOCOM-warehouse-header-lg.jpg",
      "type": "image/jpeg"
    },
    {
      "media": "(min-width: 767px)",
      "srcset": "/STATIC/binary/images/global/TIMOCOM-warehouse-header-md.jpg",
      "type": "image/jpeg"
    },
    {
      "media": "(min-width: 200px)",
      "srcset": "/STATIC/binary/images/global/TIMOCOM-warehouse-header-sm.jpg",
      "type": "image/jpeg"
    }
  ],
  "img": {
    "src": "/STATIC/binary/images/global/TIMOCOM-warehouse-header-xl.jpg",
    "alt": "Lagerflächen suchen und anbieten – europaweit"
  }
}

No notes defined.