Masthead Height – Can it Auto-Adjust?

Hi, I’m a newbie setting up a new site with Catch Adaptive. I uploaded several 1680 x 720 images for the header (masthead), but on a wide display the masthead image gets “zoomed in” so it crops off the top and bottom of the images. Apparently this is because the image height seems to be controlled only by the size of the header text (site-title and site-description) and the padding that’s specified for the masthead. Site (still incomplete) is: https://ministryfellowship.org On a related note, I see that the masthead height is set to 100%. 100% of WHAT? It doesn’t look like it’s either 100% of the display width (or height), or 100% of the image height, so I’m kind of scratching my head on that parameter. Is there any way to edit the CSS so that the masthead height will “grow” as the display width increases, such that the height is either the required space (to fit the header text and padding) OR the height required to fit most of the image (whichever is greater)? I would think specifying a height percentage would do this, but I don’t see how the current “height: 100%” is doing anything, so I am totally confused on that point. On another related note, what happens if the CSS specifies both a height, and padding around an element, and the two values conflict? For example, some 60px text, with 20px padding top and bottom, but height is set at 80px. Which one “wins”?