Generated by SassMeister.com.

Intrinsic-Ratio-Demo.css

/******* instead of this  */
.field-story-sad {
  width: 50%;
  position: relative;
  height: 0;
  padding-top: 66.66667%;
  width: 100%;
}
.field-story-sad > * {
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  margin: 0;
  padding: 0;
}

/******* do this   */
.field-story-happy {
  width: 50%;
  position: relative;
  height: 0;
  padding-top: 66.66667%;
  width: 100%;
}
.field-story-happy img {
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  margin: 0;
  padding: 0;
}

.irrelevant-container {
  max-width: 600px;
  margin: 20px auto;
}

Intrinsic-Ratio-Demo.html

<div class="irrelevant-container">
 <div class="field-story-sad">
   <img src="http://placekitten.com/1200/800" />
   <a href="#">sad kittehs</a>
 </div>
</div>

<div class="irrelevant-container">
 <div class="field-story-happy">
   <img src="http://placekitten.com/1200/800" />
   <a href="#">Yay for kittehs!</a>
 </div>
</div>

Intrinsic-Ratio-Demo.sass

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Toolkit (v2.0.0.alpha.5)
// ----

@import "toolkit"

// One thing that's always bothered me about the intrinsic-ratio 
// mixin is that you apply it to the parent container, and then 
// it uses an asterisk to target all items in that container.
// Sometimes there is more than one thing in that parent
// container and that is too broad. Like if its a container 
// with an image and a caption inside it, and you only want to 
// target the image.

// I thought it would be nice if there was a way to specify which
// child element or class you want to target - and there is!
// Of course! Thanks @snugug!

/******** instead of this  */
.field-story-sad
  width: 50%
  +intrinsic-ratio(3/2)

/******** do this   */
.field-story-happy
  width: 50%
  +intrinsic-ratio(3/2, $elements: img)
  
.irrelevant-container
  max-width: 600px
  margin: 20px auto

SassMeister-rendered.html

<div class="irrelevant-container">
 <div class="field-story-sad">
   <img src="http://placekitten.com/1200/800" />
   <a href="#">sad kittehs</a>
 </div>
</div>

<div class="irrelevant-container">
 <div class="field-story-happy">
   <img src="http://placekitten.com/1200/800" />
   <a href="#">Yay for kittehs!</a>
 </div>
</div>