set header section height to equal the image height

  • scott miller

    (@scott-miller)


    8 years ago

    Hi you guys,

    I’ve scoured posts and just can’t find the answer, I figure as soon as I post I will :-/

    In my hemmingway (not rewritten) header I didn’t want the image to stretch or crop when sizing the browser window, I’ve gotten it to scale-only using .header{background-size: contain;}

    https://optimaldistance.com

    Hopefully you will see that as the image scales smaller in height, space starts to appear above and below the image. I was wondering if the header section height could be set to match the height of the image. So, for example, as you size the browser window narrower, and the image decreases in height, the menu moves upward to stay right up under the image bottom. Sorta like sectionheight=imageheight.

    Wow I hope that makes at least a little sense.

    Thank you! -scott

Viewing 1 replies (of 1 total)
  • Thread Starter scott miller

    (@scott-miller)

    Hi, I just set .header.section {height: 416px;} so obviously that’s not going to allow the height to scale. It would be there I’d put my magic line {height: whatevertheheightoftheimageis;}

Viewing 1 replies (of 1 total)
  • The topic ‘set header section height to equal the image height’ is closed to new replies.