Responsive image replacement

Take a look and let me know what you think.

The mixin creates a background image that acts like a responsive image with max-width and an intrinsic ratio.

@mixin image-replace($width, $height, $image) {
  $ratio: $height / $width * 100%;

  display: block;
  width: 100%;
  max-width: $width;
  height: 0;
  padding: $ratio 0 0 0;
  overflow: hidden;
  background: url($image) center center no-repeat;
  background-size: contain;
}

Browser support is set by background size, so no IE8 and no Opera mini. But that's what fallbacks are for.

Notes

It looks like this only works if it has a wrapper element that collapses to the width of the replaced element. Might still work with some tweaks though.