javascript - 如何将全屏应用于图像

Question

这个 Gumby 的示例站点:http://tiltingpoint.com/#/

当我们改变浏览器的宽度和高度时，可以控制顶部的红色图像。

我认为是文章标签中的“全屏”完成的。

<article id="panel-1" 
         class="panel" 
         full-screen="" 
         style="background-image:url("http://tiltingpoint.com/images/backgrounds/bg_panel_1.jpg");>

当我们更改浏览器高度时，此源添加了高度样式。我明白了。

但是我已经无法理解它是如何工作的，也找不到具体的描述。

请告诉我如何根据浏览器宽度和高度的变化来改变图像保持宽高比。

Answer 1

它很方便，试试这个:

@media screen and (max-width: 1700px) {

    {
          background: url(newImage.jpg) no-repeat center center fixed; 
    }

}

这也适用于 IE9

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%9 !important;
}