Fixed Aspect Ratio Responsive Images with Background-Size Cover

Posted on June 10, 2014

I just figured out a tricky way to achieve fixed-aspect-ratio images that are responsive with the CSS3 background-size: cover property.

Let's say you want your images to always be 4:3. Create a transparent PNG image that is 4px by 3px.

CSS


.image{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
}

.image img.ratio-enforcer{
  width: 100%;
  visibility: hidden;
}


HTML


<div class="image" style="background-image:url(yourimage.png)">
  <img src="4x3.png" class="ratio-enforcer" />
</div>


That's basically it. The 'ratio enforcer' PNG is invisible but, since images scale vertically in their ratio when you don't specify a height, it causes its container div to occupy a 4:3 space at 100% width. The CSS3 'background-size: cover' property will ensure that your image is clipped and scaled as efficiently as possible inside the space.

comments powered by Disqus