SlabMassive Web Component

Use the <slab-massive> custom element to wrap large content that will be scaled down to fit. The slab-massive element scales down the content into a scrollable area and adds a view finder to the top left. The controls in the view finder allow for zooming in and out, toggling fullscreen, and minimizing the controls.


Example img within the slab-massive element.

Photo by Sweet Ice Cream Photography: unsplash.com/photos/zBdXb-h02JU (5463x3642)

<slab-massive
    width="5463" height="3642"
    zoom="2" fill="cover"
    offset-x="0" offset-y="0">
  <img src="https://source.unsplash.com/zBdXb-h02JU/5463x3642"
    width="5463" height="3642"
    alt="Grand Canyon National Park, United States">
</slab-massive>
      
Grand Canyon National Park, United States

Attribute documentation

Attribute Description Works
width Set to the width of the content. Yes
height Set to the height of the content. Yes
zoom Amount to zoom. Anything over '1' will show partial content. Not well tested
offset-x When zoomed, the X position of the viewfinder box. Not tested. Set to 0.
offset-y When zoomed, the Y position of the viewfinder box. Not tested. Set to 0.
fill Option to have content fill the entire width and height of the container. Will probably deprecate.