Como altero a altura da imagem do cabeçalho em vinte e dezessete?

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.

De um comentário que eu fiz na @ resposta do usuário (esse é um nome legal);) Eu pensei em dar uma chance.

Estou editando o arquivo de tema diretamente porque estou trabalhando em um contêiner de Docker descartável, é mais uma prova de conceito. Adaptá-lo a um tema infantil precisará de alguns ajustes.

Em content/themes/twentyseventeen/style.css na área entre 3680 ~ 3670ish é onde está a imagem do cabeçalho.

código original:

.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;
}

Alterar o tamanho (e a ordem) é bom o suficiente para alcançar a visualização desconectada:

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

Eu deixei o vh e o % para cobrir as bases em que max-height não foi atingido, mas depois defina o max-height para o que você procura.

Há uma ressalva para tudo isso:

É a seção mais alta de pixels. Então, a menos que você tenha uma boa parte da imagem nessa área ... Parece ruim (muitas cabeças cortadas)

mais a seguir (quando eu resolver)

Basta editar o tema no painel e adicionar a seguinte definição de CSS à seção de tema "custom css":

.has-header-image.home.blog .custom-header {
    height: 26vh;
}

Você pode mudá-lo cortando a imagem. no WordPress, existe uma opção como customizador. Você precisa seguir os passos abaixo para recortar a imagem.

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.

Você poderia usar o Firebug (ou olhar o código-fonte da página) para encontrar o CSS usado para exibir a imagem do cabeçalho. Em seguida, adicione o CSS para fazer a alteração. O CSS exato que você usa depende do tema.

O Firebug permite que você altere o CSS temporariamente para obtê-lo como deseja, depois copie esse novo CSS para a página CSS do tema (se tiver essa opção).

Se não houver uma opção CSS personalizada em seu tema, a melhor maneira é criar um tema filho (muitos tutoriais sobre isso) e adicionar seu css personalizado à página styles.css desse tema filho. (Nunca mude o tema pai; suas alterações serão sobrescritas na próxima atualização do tema.)