jquery - 如何在CSS中的任何屏幕尺寸下将长图像保留在背景覆盖范围内？

Question

我正在尝试将移动应用程序的 gif 放入 CSS 的背景“封面”中。在较大的屏幕上，它看起来不错 - gif 将正确加载，如下所示:

但是，即使在稍小的屏幕上，我也无法使图像正确缩小，并出现如下溢出:

“封面”背景的 CSS 如下:

#deck{
    background:url('test3bg.jpg');
    position:absolute;
    top:104px;
    left:0;
    background-position:center center;
    background-size:cover;  
    width:100%;
    height:70%;
    background-repeat:no-repeat;
}

对于应用程序演示来说，它是

#appDemo{
    position:absolute;
    width:400px;
    height:600px;
    background:url('appDemo.gif');
    background-repeat: no-repeat;
    background-size:330px;
    right:8%;
    top:30px;
}

背景图像区域及其子区域的 HTML:

<div id="deck">
        <div id="leader">
            <div id="main">Lorem ipsum <span id="anything">dolor</span></div>
            <div id="subtitle">lorem ipsum dolor<br><span id="subtitleEmph">lorem ipsum... dolor</span></div>
        </div>
        <div id="dog">
            <img src="dog2.png" style="opacity:0;">
        </div>
        <div id="appDemo">

        </div>

    </div>

背景区域的其他相关 CSS:

#dog{
    background:url('dog1.png');
    background-repeat: no-repeat;
    width:200px;
    height:200px;
    background-size:200px;
    position:absolute;
    top:100%;
    margin-top:-188px;
    left:12%;

}
#leader{
    font-family: 'montserratultra_light', sans-serif;
    font-weight:200;
    font-size:45px;
    color:#000;
    position:absolute;
    left:15%;
    top:26%;
}
#anything{
    font-family: 'montserratlight', sans-serif;
    color:#ef473a;
    text-shadow: 0 0 1px #ef473a;
    font-style:italic;
}
#leader #subtitle{
    font-family: 'montserratlight', sans-serif;
    font-size:28px;
    margin-top:15px;
}
#subtitle #subtitleEmph{
    font-family: 'montserratregular', sans-serif;
    color:#ef473a;
    font-style:italic;
}

我尝试了各种愚蠢的事情，例如编写 JavaScript 函数来根据文档大小和窗口大小重新调整背景大小，但这感觉没有必要。有谁知道这个问题的合理 CSS 解决方案吗？

Answer 1

设置#appDemo的css像这样:

#appDemo{
    position:absolute;
    width:auto;
    height:60%; /*you might need to play with this setting*/
    max-height: 600px;
    overflow:hidden; /*<-- added so that it does not disappear with auto width*/
    background-repeat: no-repeat;
    background-size:330px;
    right:8%;
    top:30px;
}

并将图像添加为 <img>将元素添加到 div 而不是背景图像。