Jump To:

  1. Mixins
    1. styles()

Fill-context

Setup images or videos to behave like background images (object-fit).

Mixins

styles()

Mixin

Output component stylesheet

  • Use the parent selector '.fill-context' on the element that should be the frame for the child object (img,video).
  • Can be used within the grid with modifier (see in example below).
File Information
  • File: _fill-context.scss
  • Group: fill-context
  • Type: mixin
  • Lines (comments): 10-28
  • Lines (code): 30-62

Examples

@include ulu.component-fill-context-styles();
<div class="fill-context">
  <img class="fill-context__object" src="background.jpg">
</div>
 
 
<div class="fill-context fill-context--auto">
  <img src="background.jpg">
</div>
 
<div data-grid-item="width: 6" class="fill-context fill-context--in-grid fill-context--contain">
  <img src="background.jpg">
</div>
Preview

Require