响应的背景缩略图

Question

我试图在wordpress中构建主题，但在调整浏览器窗口大小时无法弄清楚如何调整背景图片的大小。当我获得图像并将其设置为“完整”或任何其他预设尺寸时，我不会调整大小：

在我的 front-page-php ：

中

<?php
    // check if the post or page has a Featured Image assigned to it.
    if ( has_post_thumbnail() ) {
        // the_post_thumbnail();

        $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

        <header id="hero" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat center center fixed;"></header>

    <?php }
?>

并在我的css文件中：

header {
  max-width: 100vw;
  height: 95vh;
  background-size: cover;
}

它只是保持不变..非常感谢任何帮助！

Answer 1

有一种更简单的方法来获取帖子的缩略图网址。此外，最好在background-image属性中设置style属性：

<?php
    // check if the post or page has a Featured Image assigned to it.
    if ( has_post_thumbnail() ) {

        // the_post_thumbnail();
        $backgroundImg = get_the_post_thumbnail_url($post->ID, 'full'); ?>

        <header id="hero" style="background-image: url('<?= $backgroundImg; ?>');"></header>

    <?php }
?>

＆安培; CSS应该是：

header {
  max-width: 100vw;
  height: 95vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}