DanWebb
5/9/2015 - 8:10 AM

Make all images of varying sizes scale evenly in a grid

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%;
}