如何使用引导程序使背景图像和文本覆盖响应

Question

经过大量的努力，我设法获得了文本和表格以将背景图像覆盖在所需位置。但是，现在我试图使设计尽可能快地响应，就像撞墙一样。

看，我需要将文本显示在背景图像的底部（自然高度510px）。但是，我设法做到这一点的唯一方法是在CSS中将高度硬编码为510px，这使得任何自适应设计都变得毫无用处。

下面的代码，有什么建议吗？

css文件

    #cloud {
    background-image: url("../images/cloud.svg");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1149px;
    max-height: 510px;

    height: 510px;  /* img is responsive if I remove this line, but the breaks the design */

    /* align text and form at the bottom of the image */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

html

    <div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="col-md-12 pb-5" id="cloud">
            <h1>Subscribe to our newsletter</h1>
            <p>Sign up and we will send insipration directly to your inbox</p>
            <form>
                <input type="email" value="Your Email Address">
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>
</div>