Adaptive Images with CSS

final.css

/* place these styles in your global stylesheet */
.image {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.image {
  *display: inline;
}
.image .inner {
  display: block;
  height: 0;
}

final.html

<!-- adaptive image -->
<span class="image-scope">
  <style scoped>
    /* apply background image and dimensions to the span below */
  </style>
  <span id="road" class="image" role="img" aria-label="A road in Sweden during winter."><span class="inner"></span></span>
</span>

generic.css

.image {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.image {
  *display: inline;
}

generic.scss

@import "compass/css3/inline-block";
@import "compass/typography/text/replacement";
@import "compass/css3/background-size";

.image {
  @include inline-block;
  @include squish-text;
  @include background-size(100%);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

proportional-step-0.html

<!-- This image will scale proportionally to be the full width of the column -->
<img src="road.jpg" alt="A road in Sweden during winter." width="100%">

proportional-step-1.html

<span id="road" class="image" role="img" aria-label="A road in Sweden during winter."><span class="inner"></span></span>

proportional-step-3.html

<span class="image-scope">
  <style scoped>
    /* fall-back styles for browsers without media query support (IE6-8) */
    #road {
      background-image: url('road.jpg');
      width: 100%;
      /* don't define a height on the .image */
    }
    #road .inner {
      padding-top: 66.5039%; /* 681px / 1024px * 100% = 66.5039% */
    }

    /* small image for mobile */
    @media (min-width: 0px) {
      #road {
        background-image: url('road-small.jpg');
        /* width of 100% is inherited from the fall-back styles */
        /* don't define a height on the .image */
      }
      #road .inner {
        padding-top: 66.5625%; /* 213px / 320px * 100% = 66.5625% */
      }
    }

    /* medium image for tablets */
    @media (min-width: 640px) {
      #road {
        background-image: url('road-medium.jpg');
        /* width of 100% is inherited from the fall-back styles */
        /* don't define a height on the .image */
      }
      #road .inner {
        padding-top: 66.5625%; /* 426px / 640px * 100% = 66.5625% */
      }
    }

    /* large image for desktop */
    @media (min-width: 1024px) {
      #road {
        background-image: url('road.jpg');
        /* width of 100% is inherited from the fall-back styles */
        /* don't define a height on the .image */
      }
      #road .inner {
        padding-top: 66.5039%; /* 681px / 1024px * 100% = 66.5039% */
      }
    }
  </style>
  <span id="road" class="image" role="img" aria-label="A road in Sweden during winter."><span class="inner"></span></span>
</span>

proportional.css

/* additional generic styles to be added to the styles from step 3 above */
.image .inner {
  display: block;
  height: 0;
}

step-0.html

<img src="road.jpg" alt="A road in Sweden during winter.">

step-1.html

<span class="image">A road in Sweden during winter.</span>

step-2.html

<span class="image" role="img" aria-label="A road in Sweden during winter."></span>

step-4.html

<style>
  /* fall-back styles for browsers without media query support (IE6-8) */
  #road {
    background-image: url('road.jpg');
    height: 681px;
    width: 1024px;
  }

  /* small image for mobile */
  @media (min-width: 0px) {
    #road {
      background-image: url('road-small.jpg');
      height: 213px;
      width: 320px;
    }
  }

  /* medium image for tablets */
  @media (min-width: 640px) {
    #road {
      background-image: url('road-medium.jpg');
      height: 426px;
      width: 640px;
    }
  }

  /* large image for desktop */
  @media (min-width: 1024px) {
    #road {
      background-image: url('road.jpg');
      height: 681px;
      width: 1024px;
    }
  }
</style>
<span id="road" class="image" role="img" aria-label="A road in Sweden during winter."></span>

step-5.html

<span class="image-scope">
  <style scoped>
    /* fall-back styles for browsers without media query support (IE6-8) */
    #road {
      background-image: url('road.jpg');
      height: 681px;
      width: 1024px;
    }

    /* small image for mobile */
    @media (min-width: 0px) {
      #road {
        background-image: url('road-small.jpg');
        height: 213px;
        width: 320px;
      }
    }

    /* medium image for tablets */
    @media (min-width: 640px) {
      #road {
        background-image: url('road-medium.jpg');
        height: 426px;
        width: 640px;
      }
    }

    /* large image for desktop */
    @media (min-width: 1024px) {
      #road {
        background-image: url('road.jpg');
        height: 681px;
        width: 1024px;
      }
    }
  </style>
  <span id="road" class="image" role="img" aria-label="A road in Sweden during winter."></span>
</span>