CodePen

HTML

            
              <div class="cont">

 <p>Make the viewport narroe to watch the bottom image switch aspect ratio.</p>
  
  <img class="no-replace" src="http://upload.wikimedia.org/wikipedia/commons/1/13/Flickr_-_Gaspa_-_Cairo%2C_madrasa_di_Hasan_%2812%29.jpg" width="410" height="272">
  
  <img class="replace" src="http://upload.wikimedia.org/wikipedia/commons/1/13/Flickr_-_Gaspa_-_Cairo%2C_madrasa_di_Hasan_%2812%29.jpg" width="410" height="272">
  
</div>
            
          
!
via HTML Inspector

CSS

            
              body {
  background: #222;
  color: #ccc;
  font-family: sans-serif;
}
.cont {
  width: 100%;
  margin: 0 auto;
    
  @media (min-width: 30em) {
  width: 50%;
  }
}

img {
  height:auto;
  max-width: 100%;
  
  margin-bottom: 1em;
}

.replace {
 
  // Unc Dave's:
  height: 0;
  width:100%;
  padding-bottom: 56%;

  background-position: right center;
  background-size: cover;
  
  // Wish we could use attr(href) here, but no luck.
  // For now, best to apply this in the html or via js.
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/13/Flickr_-_Gaspa_-_Cairo%2C_madrasa_di_Hasan_%2812%29.jpg);

  @media (max-width: 30em) {
    padding-bottom: 120%;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................