WordPress：具有标题的响应式特色图片

Question

我正在使用以下代码在WordPress中显示精选图片。它工作正常，但是我在get_the_title()上苦苦挣扎，无法在图片中显示帖子的标题，并在响应时正确调整帖子的标题。

echo '<img src="'.wp_get_attachment_url( get_post_thumbnail_id() ).'" style="width:100%; height:auto;">';

Answer 1

您可以将图片作为div中的背景，并将标题放在其中。

// you can use get_the_ID() or $post->ID to get the ID of the post

$featured_img_url = get_the_post_thumbnail_url($post->ID, 'full'); 

<div class="wrapper" style="background-image: url(<?php echo $featured_img_url;?>);">

   <h2 class="the-title"><?php echo the_title(); ?></h2>

</div>

// Add this to your css
.wrapper{
   position: relative;
   height: 200px;
   width: 200px;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}
// This will center the text inside
.the-title{
   position: absolute;
   top: 0;
   bottom: 0;
   text-align: center;
}