I am new to WordPress. I assumed when I set a picture as a featured image in my post, that the picture would actually be the size it actually is.

Unfortunately, I set a picture as a featured image that was 300 x 168. Upon checking the site after uploading my post I noticed the image was resized bigger, it was changed to 595 x 333.

1.) How can I prevent this from happening?

2.) Is there a way to have images be the exact size that they actually are?

3.) Or be able to set the image size I desire proportionately? Specifically for “Featured Images” in posts on my blog.

#1 Please add the following CSS under Customize -> Custom -> CSS :

.single-post .entry-featured {
width:50%;
margin:0 auto;
display:block;
}

#2 and #3 Images size are calculating depending on your setting in customizer, By adding code above you keep them all the same fixed size.

Hope it helps.

4.) I would like to reduce the size on the Blog index page where all the posts are shown, the picture takes up more than half the screen on my laptop. How do I do that?

5.) You mentioned the image size calculating based upon the setting in my customizer? What setting are you referring to specifically? I did not know there was a setting to change the Featured image size in the customizer, I could not find one.

#1: Please provide us with your website’s URL so that we can provide you with a tailored CSS code.

#2: There isn’t any option available in the Customizer as the size is calculated automatically based on the layout you are using. For example, your stack, boxed layout, site max width, sidebar enabled or disabled and et cetera.

Thanks!

Please add this code as well :

.blog .entry-featured {
width: 50%;
margin: 0 auto;
}

Thank you.

Brijyot

Please add this :

.archive .entry-featured {
width: 50%;
margin: 0 auto;
}

Hope it helps.

Website: elsobador.org | I’m trying to make the feature image on each blog same size. What size would that be?

Also, when doing the search, the feature images takes almost half a page as mentioned above.
Already applied CSS to remove feature image at the top of blog but this one didn’t work.

thanks in advance,

Thanks for the URL.
Upon checking your blog page, featured image on single blog post is now hidden. The following custom CSS you’ve added is working:

.single .entry-featured .entry-thumb {
    display: none !important;
}

Please clear cache or use incognito mode of browser if you’re still seeing featured image. You may also add the following CSS to remove the border that is left after you hide the featured image:

.single .entry-featured {
    border: none;
    padding: none;
}

Since featured image is now hidden, which feature image are you referring to that you want to be of the same size?