Use a higher than 230px logo image with 2013 theme

UPDATE: My question is not offtopic, because WordPress crops the logo image and not just CSS.

I’m trying to use a 4724 × 2362 png image as a site logo at the top of a WordPress website with the stock Twenty Thirteen theme.

By default the image height is cropped (here fullscreen) and you can’t see the face of the person sitting at a table:

Being a WordPress newbie I have edited the section 4.1 in the file wp-content/themes/twentythirteen/style.css and changed 230px to 500px:

.site-header .home-link {
        color: #141412;
        display: block;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 500px;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
}

Now the “header” is higher, but my problem is that the image is still cropped (I think at the moment when I set it as the “header image” for the theme 2013).

Please advise me how to fix this, probably by editing some PHP file under wp-content/themes/twentythirteen?

First of all, do not change any files in the twenty thirteen theme. The reason been, twenty thirteen is updated regulary, so if you made changes to the theme, you WILL loose everything you have done to the theme. You should create a child theme

You need to change the function that set the header height to get your image correctly cropped. This function can be found in ‘inc/custom-header.php’ on lines 30.

‘height’ => 230,

To change this, create a functions.php in your child theme, and add the following code in the functions.php you’ve created. This function will override the default heigh and set it to 500px

<?php
function my_custom_header_setup() {
    $args = array( 'height' => 500 );
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'my_custom_header_setup' );

You can then just add the following style as you mentioned to your child themes’ style.css

.site-header .home-link {
        color: #141412;
        display: block;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 500px;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
}