Forcing images to conform to a 16:9 aspect ratio

In the Bootstrap front-end framework, you can add the classes embed-responsive embed-responsive-16by9 or embed-responsive embed-responsive-4by3 on a DIV that wraps an IFRAME, EMBED or OBJECT element to ensure that video players always conform to a 16:9 aspect ratio on your responsive website (more info).

But what about images? In cases where content has been migrated onto a WordPress site, re-creating all thumbnails in the proper aspect ratio may just not be doable – or you may simply not have the controls in place to ensure that all images are of the correct aspect ratio. Luckily there appears to be a trick in CSS that can force aspect ratios. To get it to work, you’ll need to write CSS for a DIV that wraps the actual IMG tag like so:

.img-responsive-16by9 {
    display: block;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;

That’ll force the image output with the HTML illustrated below to respect a 16:9 aspect ratio:

<div class="img-responsive-16by9">
    <img src="">

Leave a Reply

Your email address will not be published. Required fields are marked *