Thumbnail with different sizes

I want make all my blog thumbs the size of 227×133. 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:

Read More
/ / 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?

Related posts

Leave a Reply

3 comments

  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.

  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
    
  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)
    }