Як змінити висоту зображення заголовка в двадцяти сімнадцяти?

Як я можу змінити висоту зображення заголовка (вказаний у розділі Заголовок медіа) у темі «Двадцять сімнадцять»?

Зокрема, я хочу змінити його на домашній сторінці, оскільки тут він заповнює майже всю сторінку. Я хочу, щоб це було набагато коротше. То, як це відображається на інших сторінках, таких як вбудована сторінка About, має хороший зріст, тому, якби я міг імітувати це на домашній сторінці, я був би задоволений. Хоча знати, як зробити точний контроль було б чудово.

Я знайшов (частина) коду 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спокої.

Зверніть увагу, що висотний елемент встановлюється, 100vhколи розміри висоти відносно висоти вікна перегляду. Таким чином, 100vh - це 100% огляду, тоді як 50vh - 50%.

Одним із випадків є те, що на домашній сторінці масштаб та положення зображення заголовка відрізняються, ніж на інших сторінках.

Не впевнений, чи це найкращий спосіб. Я відкритий для кращих варіантів, але поки що це працює на базовому рівні.

Просто відредагуйте тему на інформаційній панелі та додайте наступне визначення CSS у розділ теми "спеціальний css":

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

З коментаря, який я зробив у відповіді @ Користувача (це класна назва);) Я подумав, що мені це вдасться.

Я редагую файл теми безпосередньо, тому що працюю в контейнері докерного викиду, це більше підтвердження концепції. Для адаптації його до дочірньої теми знадобиться певна настройка.

У content/themes/twentyseventeen/style.cssрайоні між 3680 ~ 3670іс лежить зображення заголовка.

оригінальний код:

.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що ви хочете.

На все це є один застереження:

Це сама верхня частина пікселів. Тож якщо у вас немає гарної частини зображення в цій області ... Це виглядає безладно (багато головок відрізано)

більше слідкувати (коли я розбираюся)

Ви можете змінити його, обрізавши зображення. у 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;
}