How to fix the aspect ratio of featured images on the blog archive

Hey guys.

If you're OCD about images on your blog home page, this is for you.

No support needed here, but I wanted to offer-up a technique I've found for fixing the aspect ratio of your featured images on your blog archive.

Not all of my featured images are the same size or aspect ratio, something that doesn't matter as I have a full-screen hero header configured in Elements.

But without uniform sizes, the featured images on your blog archive look ... inconsistent.

I wanted to fix the aspect ratio at the facebook post image ratio of 1200x628, a factor of 1.91 or 52.33% (628/1200*100).

Well, here's some responsive CSS I found that does exactly that!

Note the padding-top is the inverse of the aspect ratio percentage you're looking to achieve. Sure, 50% would have worked fine, but like I say ... OCD!

.inside-article .post-image {
  width: 100%;
  padding-top: 47.67%;
  overflow: hidden;
  position: relative;
}

.inside-article .post-image img {
	width: 100%;
	height: auto;
	margin: auto;
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
}