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:

[code]
.img-responsive-16by9 {
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
[/code]

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

[code]
<div class="img-responsive-16by9">
    <img src="http://www.570news.com/wp-content/blogs.dir/sites/3/2015/04/1429827607_NSD502266764_low.jpg">
</div>
[/code]

Leave a Reply

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