Skip to content

katerlouis/cover

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

  • container $(element), defaults to parent element
  • ratio Integer, defaults to element height / width. Specify if dimentions aren't available on load (image, video, etc.)

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%