1

I have a section on my frontpage that querys through recent posts and grabs the title and thumbnail of each. In my functions.php, I've specified a width and height for the thumbnail using:

add_image_size( 'thumbnail-small', 179, 147 );

I have all different size images in my posts set as featured images and when they get pulled into the image thumbnail element on the page, they crop proportionately, but don't scale to the correct size:

enter image description here

I put borders around the images so you can see the scaling, but it seems as Wordpress is just scaling them to whatever fits right.

How can I get them to all look the same, and then just crop out the excess with overflow:hidden in CSS?

I've tried some CSS such as:

// .image-mask is the wrapping div
#middle .image-mask { width:179px; height:147px; overflow: hidden; position:relative; }
#middle img { position:absolute; display: block; top:0; left:0; }

and...

#middle img{ width: auto; max-width: 150px; height: auto; max-height: 100px; }
1
  • Shouldn't it be: "they scale proportionaly, but don't crop to the correct size"?
    – brasofilo
    Dec 15, 2012 at 10:58

1 Answer 1

5

If you want WordPress to hard-crop the images to those absolute image dimensions, you can set the $crop argument of add_image_size to true, by default it is false:

add_image_size( 'thumbnail-small', 179, 147, true );
1
  • Don't forget to regenerate the thumbnails after you add a new size.
    – stffn
    Dec 14, 2012 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.