WP thumb fit 33% column, fixed height and work with portrait/landscape?

I am editing a WordPress theme that has a layout with a main content width of 70% and a sidebar of 30%. In the main content part I have added a blog feed area with the 3 latest blog posts. Each post is:

#front-blog-feed .post { 
float: left;
width: 33.33%; }

Each .post div has a top part div:

.front-blog-thumb {
height: 220px;
width: 100%;
overflow: hidden; }

…and this is where I have added the thumbnails. So what I want to achieve is WP thumbnail images and occasional video posts with vimeo videos showing as thumbnails, all with a fixed height of 220px, but the width filling the 33% post width, with correct aspect ratio. The best I have achieved so far is a combination of functions.php:

add_image_size( 'custom-size', 9999, 400, array( 'center', 'center' ) );

And thumbnail img CSS:

.front-blog-thumb img {
    min-height: 220px;
    max-width: none; /*max-width: none to overrule theme CSS*/

The main problem is that the user needs to have both landscape and portrait images as featured images (and video posts). What I have now looks decent and works in the layout, but the visual part of the images is the top left part of the image, and alot of image file is loaded but hidden with overflow:hidden, which doesn’t seem like a great idea. Some featured images look good, some not so good. So the problem is combining: fluid 33% width 3 column layout, fixed height thumbnail of 220px visible, decent crop and some way to make both landscape and portrait images looking OK with this setup. Any ideas?

Read more here: WP thumb fit 33% column, fixed height and work with portrait/landscape?

Leave a Reply

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