<picture class="visual visual--contained">
    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
    <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
</picture>
<picture class="visual{{#if in-flow }} visual--in-flow{{/if}}{{#if contained }} visual--contained{{/if}}">
  {{#if src.mobilew }}
  <source media="(max-width: 899px)" data-sizes="auto" data-srcset="{{ src.mobilew }}" type="image/webp">
  {{/if}}
  {{#if src.mobile }}
  <source media="(max-width: 899px)" data-sizes="auto" data-srcset="{{ src.mobile }}">
  {{/if}}
  {{#if src.desktopw }}
  <source media="(min-width: 900px)" data-sizes="auto" data-srcset="{{ src.desktopw }}" type="image/webp">
  {{/if}}
  {{#if src.desktop }}
  <source media="(min-width: 900px)" data-sizes="auto" data-srcset="{{ src.desktop }}">
  {{/if}}
  <img data-sizes="auto" data-src="{{#if src.mobile }}{{ src.mobile }}{{else}}{{ src }}{{/if}}" class="lazyload" alt="{{ alt }}">
</picture>
src:
  mobile: /graphics/video-poster-mobile.jpg
  mobilew: /graphics/video-poster-mobile.webp
  desktop: /graphics/video-poster.jpg
  desktopw: /graphics/video-poster.webp
alt: ''
srcset: >-
  https://via.placeholder.com/500x250 500w, https://via.placeholder.com/1000x500
  1000w, https://via.placeholder.com/2000x1000 2000w
contained: true
  • Content:
    .visual {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
    }
    
    .visual--in-flow {
      position: relative;
    }
    
    .visual img {
      display: block;
      width: 100%;
      object-fit: cover;
      object-position: center center;
    }
    
    .visual--contained img {
      object-fit: contain;
    }
    
  • URL: /components/raw/visual/visual.scss
  • Filesystem Path: ../src/02_atoms/visual/visual.scss
  • Size: 303 Bytes

No notes defined.