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

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

  • This topic has 1 reply, 2 voices, and was last updated 1 year ago by Leo.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #997745
    Paul

    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 1200×628, 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%;
    }
    #997919
    Leo
    Staff
    Customer Support

    Thanks for sharing 🙂

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.