How to change the aspect-ratio of full-width headers?

[phlow]

How to change the aspect-ratio of full-width headers?

[nibl]

I forgot to mention that my problem is that the image gets automatically cropped. That is what I am trying to avoid by changing the dimensions.

[Phlow]

You have to check out the following sass-file › _sass/_07_layout.scss

You can change the #masthead settings and you can set them to your taste different for all different sizes of screens. Happy coding :)

#masthead {
        height: 200px;
    }

/* Masthead
------------------------------------------------------------------- */

#masthead {
    background-color: $primary-color;
}
#masthead-no-image-header {
    background-color: $primary-color;
}
#masthead-with-text {
    text-align: center;
    font-size: rem-calc(54);
    font-family: $header-font-family;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 3px rgba(0,0,0,.4);
}
#masthead-no-image-header {
    height: 175px;
}
#masthead-no-image-header #logo img {
    margin-top: 60px;
}

/* Masthead › small-only
------------------------------------------------------------------- */

@media #{$small-only} {
    #logo img {
        display: none;
    }
    #masthead {
        height: 200px;
    }
    #masthead-with-pattern {
        padding: 15px 0;
    }
    #masthead-with-background-color {
        padding: 15px 0;
    }
    #masthead-with-text {
        height: 220px;
        padding: 30px 0;
        font-size: rem-calc(36);
    }
    #masthead-no-image-header {
        display: none;
    }
}


/* Masthead › medium-only
------------------------------------------------------------------- */

@media #{$medium-only} {
    #logo img {
        margin-top: 60px;
    }
    #masthead {
        height: 280px;
    }
    #masthead-with-pattern {
        padding: 20px 0;
    }
    #masthead-with-background-color {
        padding: 20px 0;
    }
    #masthead-with-text {
        padding: 60px 0;
        height: 300px;
    }
}


/* Masthead › large-only
------------------------------------------------------------------- */

@media #{$large-only} {
    #logo img {
        margin-top: 80px;
    }
    #masthead {
        height: 310px;
    }
    #masthead-with-pattern {
        padding: 30px 0;
    }
    #masthead-with-background-color {
        padding: 30px 0;
    }
    #masthead-with-text {
        height: 330px;
        padding: 60px 0;
    }
}


/* Masthead › xlarge-up
------------------------------------------------------------------- */

@media #{$xlarge-up} {
    #logo img {
        margin-top: 110px;
    }
    #masthead {
        height: 380px;
    }
    #masthead-with-pattern {
        padding: 45px 0;
    }
    #masthead-with-background-color {
        padding: 45px 0;
    }
    #masthead-with-text {
        padding: 95px 0;
        height: 400px;
    }
}


#title-image-small {
    height: 240px;
}
#title-image-large {
    height: 520px;
}
#title-image-index-small {
    height: 120px;
}
#title-image-index-large {
    height: 260px;
}

[nibl]

Thanks Mo for the quick response. That solved the problem. It was the one thing I had trouble figuring out.

[Phlow]

You're welcome, Greets from Kirgisistan...