如何在二十十七中更改标题图像的高度？

如何在“二十七个主题”中更改标题图像的高度（在“标题媒体”部分中指定）？

我特别想在主页上进行更改，因为在这里它几乎填满了整个页面。我希望它要短得多。它在其他页面（例如内置的“关于”页面）上的显示方式具有良好的高度，因此，如果我能模仿主页上的显示方式，我会很满意的。虽然知道如何进行精确控制会很棒。

我在中找到了控制高度的css代码（的一部分）wp-content/themes/twentyseventeen/style.css。

当前在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;
}

当管理栏适用和代码是可见的（例如，你需要先登录）目前行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);
}

然后在行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%;
}

通过将css的这三个部分复制到我的子主题的style.css中并修改height属性，我可以调整首页上标题图像的高度。在每个部分中30vh，我分别将高度设置为calc(30vh - 32px)，和30vh。我离开了第height: 1200px一个。

请注意，将height元素设置为100vh相对于视口高度的高度大小。因此100vh是视口的100％，而50vh是视口的50％。

奇怪的是，首页上的标题图像的缩放和位置与其他页面上的不同。

不知道这是否是最好的方法。我对更好的选择持开放态度，但到目前为止，它在基本级别上都有效。

只需从仪表板编辑主题，然后将以下CSS定义添加到主题部分“自定义css”中：

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

从我在@User的答案中做出的评论（这是一个很酷的名字）；）我以为我愿意。

我直接编辑主题文件是因为我正在使用一个废弃的Docker容器，它更能证明概念。使其适应儿童主题需要进行一些调整。

在content/themes/twentyseventeen/style.css在3680〜3670ish之间的区域是其中报头图像所在。

原始代码：

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

更改大小（和顺序）足以实现注销视图：

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

我留下了vh和%来覆盖那些max-height尚未达到的基础，然后将设置max-height为您要追求的目标。

所有这些都需要警告：

这是像素的最顶部。因此，除非您在该区域中有不错的图像部分，否则它看起来很cr脚（很多头被砍掉了）

还有更多可追踪的内容（当我整理时）

您可以通过裁剪图像来更改它。在WordPress中，有一个选项可以用作定制程序。您需要按照以下步骤裁剪图像。

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

您可以使用Firebug（或查看页面源代码）找到用于显示标题图像的CSS。然后添加CSS进行更改。您使用的确切CSS取决于主题。

Firebug使您可以临时更改CSS以获得所需的样式，然后将新CSS复制到主题的CSS页面中（如果具有该选项）。

如果主题中没有“自定义CSS”选项，那么最好的方法是创建一个子主题（有关该主题的许多教程），然后将自定义CSS添加到该子主题的styles.css页面中。（不要更改父主题；您的更改将在下一次主题更新时被覆盖。）

为此，我首先设置了一个儿童主题（WP建议的步骤）。然后，在子主题的style.css文件中，添加了以下CSS。第一部分控制首页图像的高度。第二部分控制首页图像空间的高度。两者都必须匹配才能正常工作。我注释掉了一些干扰我固定高度图像的线条。现在，我在首页上的标题与所有其他页面上的标题完全相同。

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.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: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}