Eu encontrei (parte) do código css que controla a altura em wp-content/themes/twentyseventeen/style.css
.
Existe código que se aplica quando a barra de administração não é visível (usuário anônimo típico) atualmente na linha 3629
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 1200px;
height: 100vh;
max-height: 100%;
overflow: hidden;
}
E código que se aplica quando a barra de administração é visível (por exemplo, você está logado) atualmente na linha 3646
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(100vh - 32px);
}
E, em seguida, o código que se aplica no celular atualmente na linha 1638:
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
display: table;
height: 300px;
height: 75vh;
width: 100%;
}
Ao copiar essas três seções do css no style.css do meu tema filho e modificar o atributo height
, consegui ajustar a altura da imagem do cabeçalho na home page. Eu defino a altura para 30vh
, calc(30vh - 32px)
e 30vh
respectivamente em cada seção. Eu deixei o primeiro height: 1200px
sozinho.
Observe que o elemento de altura está definido em 100vh
, o que dimensiona a altura em relação à altura da janela de exibição. Então 100vh é 100% do viewport enquanto 50vh é 50% do viewport.
Uma coisa estranha é que na página inicial o zoom e a posição da imagem do cabeçalho são diferentes das outras páginas.
Não tenho certeza se esse é o melhor caminho. Estou aberto a melhores opções, mas até agora está funcionando em um nível básico.