Как получить полноразмерное изображение увеличить

Question

На моих сообщениях в Wordpress я добавил миниатюру сообщения в верхней части страницы, чтобы она была полной. Он работает правильно, за исключением того, что изображение всегда остается одного и того же размера, оно никогда не растёт. Поэтому, если экран большой, изображение растянуто настолько, что оно выглядит искаженным. Я хочу, чтобы миниатюра обрезалась, когда экран становится больше, поэтому изображение всегда будет выглядеть хорошо и понятно. (похоже на это https://www.inthefrow.com/2016/10/3-amazing-places-eat-mykonos.html) Я попытался добавить true, однако это не сработает. У кого-нибудь есть какие-то решения? Заранее спасибо.

<div class="banner-image"><?php the_post_thumbnail(array(5555, 2222, true)); ?></div>

CSS

.banner-image img { 
 
    max-width: 100%; 
 
    width:100%; 
 
    height:700px; 
 
}

Answer 1

редактировать:

заменить это:

<div class="banner-image"><?php the_post_thumbnail(array(5555, 2222, true)); ?></div> 

к этому:

<div class="banner-image"></div> 

убедитесь, что вы установили некоторую высоту в: класс .banner-изображения

затем перейти на ваш header.php (или где это шаблон заголовка) и непосредственно перед закрытием «головы»:

<style> 
    .post .banner-img { 
     background-image: url('<?php echo the_post_thumbnail_url() ?>'); 
     background-size: cover; 
     width: 100%; 
     height: // what ever you choose 
    } 
</style> 

убедитесь, что вы изменили функцию

the_post_thumbnail() 
// with 
the_post_thumbnail_url() 

в этом случае он будет работать для каждого динамически пост THER является diffrent миниатюрами