响应式背景图像（并将文本保持在中间）

Question

我正在尝试使用最少的媒体查询来编写横幅，就像过去的标题图像和文本一样，我无法找到使用 10 岁以下的任何内容的方法。

我当前的问题：

我有一个响应式背景图像，如下所示： Header Image

然而，当浏览器调整大小时，虽然背景图像是响应式的，但背景 div 中包含文本的容器并未调整大小，因此不会将文本保持在中间。

你可以看到这样的事情正在发生： Container overflowing

我尝试过各种各样的事情，容器上的高度，移除高度。但是我最终到达的所有领域，我不得不做太多的媒体查询来修复文本，或者随着屏幕尺寸的减小而改变图像的高度。我想尝试学习如何为这个网站编写一个更灵活、更直观的更好的标题，这样我也可以继承我未来的项目。

这里是代码 HTML：

<section class="home_banner">
    <?php
    $featuredimage = get_the_post_thumbnail_url();
    ?>
    <div class="banner_image" style="background-image: url('<?php echo $featuredimage; ?>'); ">
        <div class="container">
            <div class="banner_text_inner">
                <p>Lorem Ipsum</p>
                <div class="banner_excerpt">
                    <h1>Powerful engaging opening title</h1>
                </div>
            </div>
        </div>
    </div>
</section>

这是css：

.home_banner{

    .banner_image {
        background-size:100%;
        height:100rem;
        background-repeat: no-repeat;

    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        text-align: center;

        .banner_text_inner {
        max-width: 1000px;
        width: 100%;
        margin: auto;
        padding: 0 10px;
        box-sizing: border-box;
        font-family: $autumnchant;
        font-size: 40px;
        color: $color-primary;

            @media (max-width: 1000px){
                font-size: 30px;

                p {
                    margin-bottom: 0;
                }
            }

            @media (max-width: 400px){
                font-size: 22px;
            }
        }

        .banner_excerpt {
            @media (max-width: 1000px){
                h1 {
                    font-size: 40px;
                }
            }

            @media (max-width: 400px){
                h1 {
                    font-size: 30px;
                    line-height: 1;
                    letter-spacing: 5px;
                    margin-bottom: 0;
                }
            }
        }

    }
}

Answer 1

尝试添加“背景尺寸：封面；”到您的横幅图像并添加最小高度。