Feature Image thumbnail cuts off

Support
#1

Hi there! my feature image is cut off when it displays as a thumbnail on my blog. Is there a way I can change this to fit the whole image ? Thank you!

http://thedaoofaction.com/blog/

#2

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.blog a.entry-thumb {
    background-size: contain;
}
#3

Added to the global css no change .

#4

Hi There,

By default in Ethos stack blog index page, featured image is added a background image. As you can see, it is horizontal type. On the structure where the feature image is added as background, the width is larger that its height. Then your featured image is vertical: http://thedaoofaction.com/wp-content/uploads/2017/08/Title-Page.jpg. That won’t fit exactly.

We can try increasing the height by adding this custom CSS:

.single-post  a.entry-thumb {
     padding-bottom: 100%; /* This is 65% by default. Adjust until the image fits*/
 }

For that to work, all your featured image should be vertical.

Hope this helps.

#5

Thanks for replying! it didn’t work but I’ll re adjust the size of the image and see if that helps.

#6

Try 164%

I see you’re using different image dimensions or aspect ratio for your featured image and showing all parts of your image is important to you. If you look at the Ethos demo at http://demo.theme.co/ethos-1/, you’ll see that it uses uniform sized images and uses the featured image as a background cover for the entry featured area so part of the images that have different aspect ratio than the entry featured area will be hidden. That is a physical limitation. To show all parts, you need the background-size to contain the image inside that area like @thai suggested. But, it will not look good (at least in my opinion).

With all that said, you might want to use uniform sized featured images. Or, use a different Stack like Integrity, See http://demo.theme.co/integrity-1/blog/.

Further tweaking with CSS will be getting into custom development which is outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at [email protected] if this is of interest to you.

Thank you for your understanding.