Skip to content

Instantly share code, notes, and snippets.

@DanWebb
Created May 9, 2015 08:10
Show Gist options
  • Save DanWebb/7e934f4142933e6ed825 to your computer and use it in GitHub Desktop.
Save DanWebb/7e934f4142933e6ed825 to your computer and use it in GitHub Desktop.
Make all images of varying sizes scale evenly in a grid
/* presuming that the a element has a background image */
.grid .column a {
width: 100%;
overflow: hidden;
display: block;
/* scale the image proportionally based on the elements height and width */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* make the elemnts height a 1:1 ratio with it's width */
height: 0;
padding-bottom: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment