thumbnail not scaling to fit container (8 posts)

  1. lettersforlilyb
    Posted 2 years ago #

    Hi, Ive been a long time wordpress user but only now on the forums as I was searching all over the internet to find an answer to my template problem, with no luck, unfortunately.

    I'm trying to scale (resize and crop) my featured images to fit the container on the front page, but all it seems to let me do is either resize (and then stretch as it's not in proportion anymore) or scale (which would only give me only the upper left corner of my image). This is my code on the page:

    <div class="featured-thumbnail"><?php if (has_post_thumbnail()) {the_post_thumbnail();} ?></div>

    And the CSS:

    .featured-thumbnail {
    	float: left;
    	overflow: hidden;
    	margin: 10px 10px 10px 0;
    	height: 150px;
    	width: 150px;
    .featured-thumbnail img {
            overflow: hidden;
            max-width: auto;
            display: inline;

    Help is very much appreciated! Have been struggling with what is supposed to be a simple thing for what seems like decades now. Thanks in advance!

  2. Andrew
    Forum moderator
    Posted 2 years ago #

    If you can't send us a link to the webpage, can you send us a link to a mocked up webpage through CSSDesk? CSSDesk has a 'share' option and generates a link. Send us that, please.

  3. lettersforlilyb
    Posted 2 years ago #

    Sure, sorry can't send a link as I'm designing locally via xampp right now.

    Is this helpful? http://cssdesk.com/CBUJ3

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    Thanks, that's almost what we need. We still need more HTML to understand the context, "to fit the container on the front page". I can't see a container through that HTML, unless I'm missing the point.

    Can you right click your webpage, select 'View source' and use all of that for the CSSDesk HTML?

  5. lettersforlilyb
    Posted 2 years ago #


    This is all of it so far, I changed one of the images to that nice muffinphoto as I'm sure you can't see my localhost/images ;)

    Hope this is not too much to read, want to give you as much information as possible! Hope you see what I mean now?

  6. Andrew
    Forum moderator
    Posted 2 years ago #

    I don't quite see what you mean, sorry. Your images seem to fit nicely in your container [screenshot].
    Am I looking at the right container [screenshot]?

    Does the issue consist on a particular browser?`

  7. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

    Why don't you use add_image_size() to add a custom image size for that particular template use?

    For example (in functions.php, inside a Theme setup function, hooked into after_setup_theme):

    add_image_size( 'front-page-featured', 9999, 150, false );

    Then, in your template:

    <div class="featured-thumbnail">
    if (has_post_thumbnail()) {
        the_post_thumbnail( 'front-page-featured' );

    The add_image_size() args:

    - 'front-page-featured': name of the custom image size
    - 9999: width (in pixels)
    - 150: height (in pixels)
    - false: hard-crop? (false = box-resize; true = hard-crop)

    So, that means that the custom image size will be scaled to fit a maximum height of 150px, with any width (less than 9999px).

  8. lettersforlilyb
    Posted 2 years ago #

    Andrew, yes they did fit but didn't resize quite well. Thanks for your help though!

    Chip, if I ever run into you I will make you a bunch of muffins if I'm not too busy hugging you. This worked, finally, has been stressing me out so much. Thanks loads!

Topic Closed

This topic has been closed to new replies.

About this Topic