Featured Image Size Not Consistent

  • Hey, so for my featured image, the images I use for each page differ in size initially. I tried to set it so that the image would be fit to the same size no matter what the initial size was, however, this is not working for me as the images still have different sizes.

    For example, look at these two pages:
    https://www.thelostgeographer.net/australia/
    https://www.thelostgeographer.net/bolivia/

    The featured images (the flags of the countries) do not take up the same space on their respective pages.

    Here is the code I have so far:
    1. (In the header)
    <?php
    if ( has_post_thumbnail() ) {
    the_post_thumbnail(‘banner’);
    }
    ?>

    2. (In style.css)
    /*Image Style*/
    img {
    max-width: 100%;
    }

    3. (In functions.php)
    add_theme_support( ‘post-thumbnails’ );
    add_image_size( ‘banner’, device-width, 1280, true);

    Thanks in advance for any help!

Viewing 5 replies - 1 through 5 (of 5 total)

  • What size were you wanting the image to be? You can make them be the same width by setting a width in css. Using css, however, they can still differ in their height. You can force them to be a certain height but they will look expanded or squished.

    This will set a max-width and center your image:

    .wp-post-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  height: auto;
}

    If you need them to be exact dimensions, you can use the built in cropping tool in the media screen (would also let you decide exactly what part of the image you want to use), or use the add_images_size function similar to what you’re already doing.

    add_image_size( 'banner', 1280, 300, true );

    This will do a hard crop of the image at 1280×300.

    Thread Starter rohithca

    (@rohithca)

    cthesmith, I basically want the featured image to take up the entire screen at the top, and then have them scroll down. I understand that the images can looked expanded or squished, this is fine by me. I can get them all to be the same width with the code that I gave. How would I go about forcing them to a certain height?

    If you don’t mind some images being squished, you can set the height in css:

    .wp-post-image {
  width: 100%;
  height: 800px;
}

    You might want to use some media queries to switch it up at smaller sizes. 800px could be quite a scrolling experience on a phone or small tablet.

    @media (max-width: 600px) {
  .wp-post-image {
    height: 500px;
  }
}

    Or if you would like everything to always be full width but remain proportional:

    .wp-post-image {
  width: 100%;
  height: auto;
}

    Am I going in the right direction with this?

    Thread Starter rohithca

    (@rohithca)

    That was helpful, thanks, but now all the images on my post are becoming that size instead of just the featured image.

    Thread Starter rohithca

    (@rohithca)

    Actually never mind, there was a mistake in the code. It works perfectly now, thanks so much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Featured Image Size Not Consistent’ is closed to new replies.