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

尝试添加“background-size：cover;”到你的横幅图像，并添加最小高度。

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

1 个答案: