A Pen by Rafal Klimek.

A-Pen-by-Rafal-Klimek.markdown

Responsive media object with the "padding-bottom" hack

Quick media object demo utilizing the "padding-bottom" hack originally found here.

A Pen by Rafal Klimek on CodePen.

License.

index.haml

.media-box-demo
  .media.box
    .media-img
      %img{ src: "http://lorempixel.com/640/480/food" }
    .media-content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rem ea omnis maiores repellendus inventore quos! Quae odit sequi atque officiis natus laborum repellendus assumenda libero facilis ratione corporis esse!
  

style.scss

@import "compass";

* {
  @include box-sizing(border-box);
}

.media-box-demo {
  width: 80%;
  margin: 100px auto;
}

.box{
  padding: 1em;
  @include box-shadow(rgba(black, .2) 0 0 20px);
}

.media {
  overflow: hidden;
}

@mixin image-ratio($width: 30%, $ratio: 16/9) {
  width: $width;
  padding-bottom: $width/$ratio;
}

.media-img {
  @include image-ratio(40%, 640/480);
  height: 0;
  position: relative;
  height: 0;
  float: left;
  overflow: hidden;
  margin-right: 1em;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}