A Pen by Simon.

A-Pen-by-Simon.markdown

A Pen by Simon

A Pen by Simon on CodePen.

License.

Auto-scaling-card.markdown

Auto scaling card

Auto scale the card when you resize the window

A Pen by Simon on CodePen.

License.

index.jade

div.card
  p Place anything you like here
div.card
  div.book
div.card
div.card
div.card

style.scss

@import "compass";
@mixin auto-scaling($width, $ratio) {
  width: $width;
  &:before {
    content: "";
    float: left;
    margin-top: $ratio;
  }
}

.card {
  @include auto-scaling(20%, 160%);
  background: lightsalmon;
  margin: 10px 2.5%;
  float: left;
}

// misc
.card {
  position: relative;
  .book {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("http://img3.douban.com/lpic/s4435230.jpg");
    background-size: cover;
    box-shadow: inset 0 0 1px #333;
  }
}