Responsive images container (Bonus: The content flow stays the same whether the image is loaded or not (or broken))

1 - helper.rb

def image_container(path, width, height)
  %(<div class="image-container" style="max-width: #{width}px">
    <div style="padding-top: #{(height.to_f / width.to_f) * 100}%">
      #{image_tag(path)}
    </div>
  </div>).html_safe
end

# Note: If you want the image to scale up, remove the `max-width`

2 - index.html.erb

<%= image_container('foo.png', 500, 400) %>

<!--
<div class="image-container" style="max-width: 500px">
  <div style="padding-top: 80%">
    <img src="/assets/foo.png" alt="Foo">
  </div>
</div>
-->

3 - styles.css

/* Inline image? Sure */
/* .image-container { display: inline-block; width: 100% } */

/* Centered? Done */
/* .image-container { margin: auto } */

.image-container > div { position: relative }
.image-container img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}