Center cropping featured images in CSS

I’m lazy and I like to try and figure out how to get the results I want without a lot of work. In the recent past I’ve uploaded featured images that were 1200 pixels wide and varying heights. I’m playing with a child theme of  Twenty Sixteen and wanted to center crop the existing featured images.

I could have re-sampled the cropped images one at a time in Photoshop Elements or ImageMagick (for some CLI bash shell fun). Or I could have used the Regenerate Thumbnails plugin and let that go. Instead I messed with CSS until it worked the way I liked.

The featured image on this post is 1440 x 1086 pixels and weighs in at around 230kb which is a little heavy and big. Here’s the same image without any cropping.

It’s the EIA 1956 video resolution target used for calibrating old TVs. If your browser is wide enough the top version will be center cropped as a horizontal rectangle. On your phone the 2 images will probably look the same due to the phone’s narrow viewing width. They’re both the same image.

Here’s the CSS I’m using to get that cropping.

.post-thumbnail {
     max-height: 200px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
}

.post-thumbnail img {
     flex-shrink: 0;
}

This uses CSS3 flexbox, which I hadn’t even heard of until a few days ago. My CSS is really limited and to be honest I don’t exactly get why it works. The ratio I was trying to get was 6×1 but I like this setup better.

What happens is that the existing CSS makes the featured image fill the column. That part is fluid. The height consistently stays at or below the max-height setting and the overflow is hidden. But my hack didn’t work in Chrome. The image centered and overflow worked but it was vertically stretched and distorted.

Tonight I read an article and the example used flex-shrink. I applied that to “.post-thumbnail img” and the images worked. In IE 11 it’s a little off center vertically but I can live with that for now. In Chrome, Firefox and Microsoft Edge the effect works.

When I narrow the browser then more of the image is revealed. This is a neat trick and I like it better than a static cropped image.

I’m pleased with myself. I’ll still work on it because I would like to understand this better. Learning new things is always cool and welcomed.

Update May 2nd, 2016: Don’t use .post-thumbnail since it may be in use somewhere else. Add a new specific class and use that instead.

In my child theme’s functions.php file I have this defined.

function twentysixteen_post_thumbnail() {
        if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) {
                return;
        }

        if ( is_singular() ) :
        ?>


<div class="post-thumbnail mh-thumbnail">
                <?php the_post_thumbnail( 'full' ); ?>
        </div>

<!-- .post-thumbnail -->

        <?php else : ?>

        <a class="post-thumbnail mh-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
                <?php the_post_thumbnail( 'full', array( 'alt' => the_title_attribute( 'echo=0' ) ) ); ?>
        </a>

        <?php endif; // End is_singular()
}

Which I have because I wanted the featured image to be full sized. But I also added the CSS class .mh-thumbnail and applied the flexbox to that.