Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 23, 2016 at 10:18 pm #94129
    SteveJonesMO
    Member

    Can anyone give me an idea of how to limit the size of the
    header image? It automatically resizes to proportionally fit the window as the window is resized – a useful feature. But I’d like to limit the maximum expansion to the size of the source image, which happens to be 1200×250 – preferably while being centered horizontally in the available space.

    I tried adding this to style.css in the child theme, and saw no effect:
    .header-featured-image img {
    max-height: 250px;
    max-width: 1200px;
    align-content:center;
    }

    Advice appreciated.

    June 24, 2016 at 9:42 am #94156
    Pratik
    Member

    Hi @stevejonesmo:
    Can you try following css code:

    
#header-featured-image img {
    width: auto;
}

    Let me know if this works or not. If not, please post in your site url.

    Regards,
    Pratik

    June 25, 2016 at 2:02 am #94201
    SteveJonesMO
    Member

    My problem was I miscoded my css to refer to a class rather than an id. When I set it to this:

    
#header-featured-image img {
    max-width: 1200px;
    align-content:center;
}

    It works perfectly.

    Thanks for the reply.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How to limit size of header image?’ is closed to new replies.