Thumbnail with different sizes

Question

I want make all my blog thumbs the size of 227x133. I need images width have 100% (for responsive design). Some images have width greater than the other and vice versa.

I'm using this code to show the thumbs of my blog:

/ / Post thumbnails sizes
add_theme_support ('post-thumbnails');
add_image_size ('blog-page', 9999, 545, true);

The problem is that the images are not the same size as each other:

How is: http://img834.imageshack.us/img834/1856/77751386.png

How I want: http://img17.imageshack.us/img17/5461/68767097.png

What's wrong?

Answer 1

Intermediate image sizes are discrete, not variable. When you define an image size, with specific dimensions (whether hard-cropped or box-resized), WordPress will create a discrete image, with the specified dimensions.

Otherwise, if width could be defined dynamically, WordPress would have to create a prohibitively large number of images, just to account for responsiveness.

To account for responsive design, you'll have to use CSS. The easiest way to do so is using a rule similar to the following:

#content img {
    max-width: 100%;
    height: auto;
}

That way, if the #content div is resized, your post images will be resized along with it, while maintaining their aspect ratio.

Answer 2

The assigned image sizes are only generated upon upload. If you have uploaded the files before you set the thumbnail size and crop setting you need to regenerate them. This can be accomplished with this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/

Also if you want the thumbnail to crop you should have the correct aspect ratio sate for the image size.

add_image_size ('blog-page', 227, 133, true); //1.7:1 aspect ratio
add_image_size ('blog-page', 926, 545, true); //1.7:1 aspect ratio

Answer 3

I see you are fairly new here . I hope we can assist you and if you find an answer helpful, please upvote and check it as accepted so others with your problem will see the solution.

If you are trying to resize thumbnails,

Try replacing what you had with this in your functions.php file

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 227, 133, true ); // default Post Thumbnail dimensions (cropped)
}