Making featured images fit

• 

  rdeliason · Member · Apr 5, 2015 at 5:25 pm

  • Copy link
  • Add topic to favorites

  Hi – sometimes when I upload a photo and then select it as my featured image, the entire image does not show up in the banner across the top of my post. I will get only a portion of the photo, as though the image is too large. I’ve tried to “re-size” the image but that doesn’t seem to help, unless I’m doing something wrong. Is there a way to make an uploaded image “fit” into the featured image space so I can see the whole image?

  The blog I need help with is: (visible only to logged in users)

• 

  alexjgustafson · Member · Apr 5, 2015 at 7:53 pm

  • Copy link

  Hello!

  The size of that featured image location is 1280 by 416, and then responsively designed.

  Whenever your featured image doesn’t fit those dimensions, the theme will stretch it to fit. Take this post as an example:

  http://rdeliason.com/2015/03/30/federal-prosecution-of-state-and-local-corruption-from-sea-to-shining-sea/

  Your image is 1000 × 627, so to fit the space the theme scales it up to 1200 pixels wide, but that makes it 752 pixels tall. Way too tall for the 416 pixels of space. So the theme displays the center portion of it. As you change screen sizes, it then adjusts a bit to compensate.

  Because of the responsive design and the scaling/cropping that happens to fit images into the space correctly, we can’t perfectly adjust this with CSS to make sure images are never cropped.

  The best way to make sure the whole image gets displayed is to upload images that are always 1280 by 416 pixels. This means the theme won’t have to do any cropping/scaling, it will just adjust responsively based on screen size.