Expand images or videos to cover their entire container.
This component allows you to create fullscreen teasers using images, objects or even iframes. Regardless what kind of element, it will always be centered vertically and horizontally and cover its container without losing its proportions. You can also place additional content, like text or an image, on top of the image or video.
The Cover component is applied differently, depending on whether you are using a background image, an object or an iframe. The simplest way is to add the
.cover-background class to a
<div> element with a background image.
Main component class. These prevents children from overflowing. Class Description
Centers and stretches the background image to the size of the container using the CSS
Stretches the element to the size of the parent
<div class="cover" style="height: 300px;"> <div class="cover-background cover-object" style="height: 450px; background-image:url(sample.jpg);"> ... </div> </div>
To apply the Cover component to an iframe include the
cover.js file in your document and add the
data-cover attribute to the iframe. This will update the
height attributes of the iframe to that of the element itself, expanding the video.
<div class="cover" style="height: 300px;"> <iframe data-cover src="images/placeholder.svg" width="600" height="400" frameborder="0" allowfullscreen></iframe> </div>