Reduce featured image size on pages

  • How can I reduce the size of featured images on my pages? I’ve seen CSS for this on posts but I am using pages.

    I have not been using featured images because, when I open a page with a featured image, the image takes up nearly all of what you initially see, i.e. most of above the fold. All I see on my large screen desktop computer is my menu, the page title, and the featured image. I want to convey important information above the fold.

    Here is an example page created for this question.
    https://www.feedbackreigns.net/about-2/viewing-hints/

    Is the advantage of using a featured image on pages that this image gets into Facebook and Twitter shares.

    I use images of various sizes so this may lead to difficulties.

    Here is the sort of CSS code that might help me, though I notice it is for posts not for pages.

    .single-post .featured-image {
    float: left;
    width: 150px;
    height: auto;
    margin: 12px 24px 0 0;
    }

    The page I need help with: [log in to see the link]

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

  • Hi

    this is the element
    .featured-image img

    if you want to reduce height but making sure the image adjusts to fit within
    add something like

    object-fit: cover;
    height: 200px;

    For example:
    in your Additional CSS

    .featured-image img {object-fit: cover;
    height: 200px;}

    any ambiguity, let me know

    Thread Starter persist9

    (@persist9)

    I inserted the CSS in your lower box. Now the featured image seen is a horizontal strip of the original image, that comes from somewhere in the middle of the original image. This height seems good, but could we decrease the width of the image too, so we see the whole image, just smaller. I don’t know whether the magic of CSS can extend to that. Thanks for your help.

    Thread Starter persist9

    (@persist9)

    I tried this and its good – but how do I get the image on the left without text floating up on the right.

    .featured-image img {object-fit: contain;
    height: 200px;
    width: auto;
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reduce featured image size on pages’ is closed to new replies.