Skip to content

AntonTrollback/cover

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 

Repository files navigation

No longer recommended

Consider using object-fit with a polyfill such as anselmh/object-fit

Usage

var $element = $('.something');

$element.cover();

// Update on resize
$(window).resize(function() {
  $element.cover('set');
});

Cover also needs some styles to be added to your stylesheet:

.something-container {
  position: relative;
  overflow: hidden;
}

.something {
  min-width: 100%;
  min-height: 100%;

  /* Center it, like `background-position: center` */
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Options

$('.something').cover({
  // Defaults to element parent
  container: $('body'), 
  
  // Element height / width
  // Specify if dimentions aren't available on load (image, video, etc.)
  ratio: 1080 / 1920  
});

About

jQuery plugin for sizing elements just like `background-size: cover`

Resources

Stars

Watchers

Forks

Packages

No packages published