[Support request] Auto resize/crop featured images to fill content container?

Home Forums Support Auto resize/crop featured images to fill content container?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1014168
    Eric

    Hey GP Team, I was wondering if you could offer me a CSS solution to automatically style and resize the featured images?

    At the moment I have several images and all of them are different sizes. I would like to automatically display each image to fill out the entire content width and to crop whatever doesn’t fit in a given height. Is that possible?

    No matter what I place in the customizer, the featured image always stays the same size. I would like to set the CSS so that every image is auto stretched or cropped to fit the whole space before the title.

    Thanks so much for your time and more power to GENERATEPRESS!!!

    #1014232
    David
    Staff
    Customer Support

    Hi there,

    is this just for the Featured Image on your single Posts ? Or is this for every image in the post?

    #1014745
    Eric

    Hey David! Thanks for replying… Yes, this is ONLY for page and post featured images. The other images should just be treated as normal.

    #1014805
    David
    Staff
    Customer Support

    So try this CSS:

    .post-image-above-header .inside-article .featured-image img {
        width: 100%;
        height: 300px;
        -o-object-fit: cover;
           object-fit: cover;
    }

    You can adjust the height property to suit. If you just want them to fit 100% wide and leave the height as is then remove all the properties apart from the width: 100%;

    #1015309
    Eric

    Thank you, David! This worked great… Is there anyway I can make it display the image smaller JUST on mobile? Like maybe shrink it to only occupy the top third of my phone screen? At the moment it keeps the 300px height for both, and it takes a lot of space up when viewed on my phone.

    #1015313
    David
    Staff
    Customer Support

    You can create another CSS rule specifically mobile like so:

    @media (max-width: 768px) {
        .post-image-above-header .inside-article .featured-image img {
            height: 200px;
        }
    }
    #1015338
    Eric

    Fantastic! Thanks again for your help, David. Worked like a charm!

    #1015340
    David
    Staff
    Customer Support
    #1304766
    Marcel

    Hi David,

    I’m very surprised and impressed by GeneratePress! After 5 years of TagDIV Newspaper this is really much smarter. I can find most of my answers already in docs and forum.

    In this case I wanted the same effect, however I’m using a ‘Single Post’ Element and in there I’ve chosen for the Featured Image as background.

    Above CSS doesn’t work for that, is it somehow possible to achieve the same?

    Kind regards and thanks,

    Marcel

    #1304850
    David
    Staff
    Customer Support

    Hi Marcel,

    glad to hear your enjoying the Theme.
    Could you raise a new topic where you can use the Site URL Field to share your site privately and we can take a look 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.