Support percentage dimensions

[Munter]

See this discussion: https://twitter.com/rachelnabors/status/573232079900581889

Resources: https://github.com/rachelnabors/pet-rachel https://github.com/rachelnabors/pet-rachel/blob/master/scss/_mixins.scss

http://rachelnabors.com/blackbrickroad/ and the style sheet is important: http://rachelnabors.com/blackbrickroad/css/styles.css

Example from stylesheet:

  /* line 112, ../sass/_mixins.scss */
  .photo7-scrap2 {
    background-position: 0 97.41567%;
    width: 1.15321%;
    padding-top: 1.15321%;
    height: 0;
    left: 16.72158%;
    top: 77.35%;
    -moz-background-size: 6171.42857% auto;
    -o-background-size: 6171.42857% auto;
    -webkit-background-size: 6171.42857% auto;
    background-size: 6171.42857% auto;
  }

  /* line 123, ../sass/_mixins.scss */
  .photo7 .scrap2 {
    background-position: 0 97.18663%;
    width: 71.16969%;
    padding-top: 22.40527%;
    height: 0;
    left: 13.34432%;
    top: 16.35%;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }

[Munter]

@rachelnabors might be interested in when this lands

[Munter]

@rachelnabors is there a reason for using padding-top instead of height to define the height on the individual images?

[rachelnabors]

Ooooohyeaaaah there is. padding-top can let you define the "height" of an element in relationship to its parent's width. I'm working with designs now where I don't always know the parent element's width, so I've been using a pseudo-child element technique, as seen in the first reply here:

http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio

[rachelnabors]

A heads up, I use sprites in ways most people do not. But my sprites take a beating.