Question

我的文字覆盖在设置为背景（主要徽标）的图像上。它适用于桌面，但当缩小到平板电脑或移动设备时，文字仍然是一个更大的字体大小，只是切断。

我希望背景能够扩展并且文本保留在背景中（有些缩小文本很好）。这就是我所拥有的：

<div class="full-logo" id="top">
    <div class="col-lg-12 main-logo img-responsive">
        <img src="\img\long.png" class="" alt="">
        <br>
        <h1 class="text-center">
            <div class="col-md-8 col-centered-headline">WHO WE ARE</div>
        </h1>
        <h2 class="text-center">
            <div class="col-md-8 col-centered-headline">
                Our conference is one of the best technology conferences on the planet as voted on by readers of Industry Magazine. We take a different approach.
                And that difference works for our attendees, ranging from Fortune 500 companies to the most exciting startups in the world.
                Our speakers are world class, but our networking is “simply legendary”.
            </div>
            <br>
        </h2>
    </div>
</div>

CSS包含以下信息：

/* Full Width Logo*/
.full-logo {
    width: 100%;
    height: 400px;
    background-image: url('/img/bluesky.jpg');
    background-size: cover;
    margin-top: -9px;
}

.col-centered-headline {
    display: inline-block;
    float: none;
    text-align: center;
    margin-right: -4px;
    color: white;
}

Answer 1

首先，我会指引你Media Queries。但在您的情况下，您可以在min-height上设置.full-logo吗？

.full-logo {
    width: 100%;
    min-height: 400px; /* <-- change 'height' to 'min-height' */
    background-image: url('/img/bluesky.jpg');
    background-size: cover;
    margin-top: -9px;
}

重新调整大小时，在<div>中保留文本

1 个答案: