Generated by SassMeister.com.

responsive-images.css

.module-b .wx-media .img {
  background-size: 100%;
  background-repeat: no-repeat;
  max-width: 815px;
  position: relative;
  height: 0;
  padding-top: 56.2244897959%;
  width: 100%;
  background-image: url("http://s.imwx.com/dru/2014/01/3ec9c252-4187-415d-9afb-56bf5cb46aad_320x180.jpg");
}
.module-b .wx-media .img > * {
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  margin: 0;
  padding: 0;
}
@media (min-width: 320px) {
  .module-b .wx-media .img {
    background-image: url("http://s.imwx.com/dru/2014/01/3ec9c252-4187-415d-9afb-56bf5cb46aad_485x273.jpg");
  }
}
@media (min-width: 485px) {
  .module-b .wx-media .img {
    background-image: url("http://s.imwx.com/dru/2014/01/3ec9c252-4187-415d-9afb-56bf5cb46aad_650x366.jpg");
  }
}
@media (min-width: 650px) {
  .module-b .wx-media .img {
    background-image: url("http://s.imwx.com/dru/2014/01/3ec9c252-4187-415d-9afb-56bf5cb46aad_815x458.jpg");
  }
}
@media (min-width: 815px) {
  .module-b .wx-media .img {
    background-image: url("http://s.imwx.com/dru/2014/01/3ec9c252-4187-415d-9afb-56bf5cb46aad_980x551.jpg");
  }
}

responsive-images.html

<div class="module-b wx-module">
<div class="wx-media"><div class="img"></div></div>
</div>

responsive-images.sass

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Toolkit (v2.0.0.alpha.8)
// ----

@import "breakpoint"
@import "toolkit"

$imwx-drupal: "http://s.imwx.com/dru"
$drupal-default: "/sites/default/files/styles"
$drupal-default-dev: "http://twcrb.dev/sites/default/files/styles"
$drupal-local-dev: "http://twcrb.dev/sites/local/files/styles"

$img-xs: 160px
$img-sm: 320px
$img-md: 485px
$img-lg: 650px
$img-xl: 815px
$img-xxl: 980px

$twc-ratio: 980/551

$img-xs-size: "160x90"
$img-sm-size: "320x180"
$img-md-size: "485x273"
$img-lg-size: "650x366"
$img-xl-size: "815x458"
$img-xxl-size: "980x551"

// the remaining image sizes are smaller than most
// mobile devices and don't need responsive fallbacks
// except these two square sizes:
$img-sq-sm: "155x155"
$img-sq-lg: "532x532"

// Image size mixin
@mixin dynamic-image($filename, $extension: '.png', $img-path: $imwx-drupal, $max-width: 'xl')
  @if $max-width == 'xl'
    .wx-media
      .img
        background-size: 100%
        background-repeat: no-repeat
        max-width: $img-xl
        +intrinsic-ratio($twc-ratio)
        background-image: url($img-path + '/' + $filename + '_' + '#{$img-sm-size}' + $extension)
        +breakpoint($img-sm)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-md-size}' + $extension)   
        +breakpoint($img-md)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-lg-size}' + $extension)   
        +breakpoint($img-lg)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-xl-size}' + $extension)  
        +breakpoint($img-xl)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-xxl-size}' + $extension)   


  @if $max-width == 'lg'
    .wx-media
      .img
        background-size: 100%
        background-repeat: no-repeat
        max-width: $img-lg
        +intrinsic-ratio($twc-ratio)
        background-image: url($img-path + '/' + $filename + '_' + '#{$img-sm-size}' + $extension)
        +breakpoint($img-sm)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-md-size}' + $extension)   
        +breakpoint($img-md)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-lg-size}' + $extension)   
        +breakpoint($img-lg)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-xl-size}' + $extension)  

  @if $max-width == 'md'
    .wx-media
      .img
        background-size: 100%
        background-repeat: no-repeat
        max-width: $img-md
        +intrinsic-ratio($twc-ratio)
        background-image: url($img-path + '/' + $filename + '_' + '#{$img-sm-size}' + $extension)
        +breakpoint($img-sm)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-md-size}' + $extension)   
        +breakpoint($img-md)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-lg-size}' + $extension)   
      
  @if $max-width == 'sm'
    .wx-media
      .img
        background-size: 100%
        background-repeat: no-repeat
        max-width: $img-sm
        +intrinsic-ratio($twc-ratio)
        background-image: url($img-path + '/' + $filename + '_' + '#{$img-sm-size}' + $extension)
        +breakpoint($img-sm)
          background-image: url($img-path + '/' + $filename + '_' + '#{$img-md-size}' + $extension)   
        
  @if $max-width == 'xs'
    .wx-media
      .img
        background-size: 100%
        background-repeat: no-repeat
        max-width: $img-sm
        +intrinsic-ratio($twc-ratio)
        background-image: url($img-path + '/' + $filename + '_' + '#{$img-sm-size}' + $extension)


.module-b
  +dynamic-image('2014/01/3ec9c252-4187-415d-9afb-56bf5cb46aad', '.jpg')