thumbnail not scaling to fit container

  • 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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter lettersforlilyb

    (@lettersforlilyb)

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

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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?

    Thread Starter lettersforlilyb

    (@lettersforlilyb)

    https://cssdesk.com/CBUJ3

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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?`

    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">
<?php
if (has_post_thumbnail()) {
    the_post_thumbnail( 'front-page-featured' );
}
?>
</div>

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

    Thread Starter lettersforlilyb

    (@lettersforlilyb)

    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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘thumbnail not scaling to fit container’ is closed to new replies.