<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
.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;
}
No notes defined.