/* 1. Розтягуємо всі батьківські контейнери на 100% */
header.pkp_structure_head, 
.pkp_head_wrapper, 
.pkp_site_name_wrapper, 
.pkp_site_name {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Працюємо з посиланням-обгорткою логотипу */
.pkp_site_name > a {
    display: block !important;
    width: 100% !important;
    height: 180px !important; /* Фіксована висота, щоб банер не був надто величезним */
    padding: 0 !important;
    overflow: hidden !important;
}

/* 3. Головні налаштування самого зображення */
.pkp_site_name img {
    width: 100% !important;      /* Тільки на всю ширину */
    height: 100% !important;     /* Заповнити висоту обгортки */
    
    /* Ця властивість робить те, що ви просили: */
    /* Вона зберігає пропорції, заповнює ширину, а зайве ховає зверху/знизу */
    object-fit: cover !important; 
    
    /* Центруємо, щоб напис "ТЕХНІКА" завжди був посередині */
    object-position: center center !important; 
    
    max-width: none !important;  /* Прибираємо ліміти OJS */
    display: block !important;
}

/* 4. Прибираємо бічні відступи у самої сторінки, якщо вони заважають */
.pkp_structure_page {
    padding-top: 0 !important;
}

/* Приховуємо текстову назву журналу, яка накладається поверх картинки */
.pkp_site_name .is_img .pkp_screen_reader,
.pkp_site_name .is_img span:not(.pkp_site_logo) {
    display: none !important;
}

/* Якщо попередній варіант не спрацював, цей прибере будь-який текст всередині посилання логотипу */
.pkp_site_name a {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
}

/* Повертаємо видимість самій картинці (бо попередній пункт міг її зачепити) */
.pkp_site_name a img {
    text-indent: 0 !important;
    font-size: medium !important;
}