如何将全屏应用于图像答案

【问题标题】：How to apply full-screen to image如何将全屏应用于图像
【发布时间】：2014-05-25 12:52:44
【问题描述】：

这个 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");>

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

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

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

【问题讨论】：

样式属性错误style="background-image:url("http://tiltingpoint.com/images/backgrounds/bg_panel_1.jpg");应该是style="background-image:url(http://tiltingpoint.com/images/backgrounds/bg_panel_1.jpg);"
使用这个插件 - github.com/srobbin/jquery-backstretch

标签： javascript jquery html css gumby-framework

【解决方案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;
}

【讨论】：

【解决方案2】：

我唯一能说的就是尝试添加这个你的CSS。这应该使图像扩展其容器或父元素的完整大小。

panel-1 {
   width: 100%;
   height: 100%;
}

如果这不起作用，你可以这样做

panel-1 {
  max-height: 100%;
  max-width: 100%;

这些将根据父元素的大小起作用。如果您试图将它作为 BG 图像，我会尝试插入到 html 元素或 body 元素中，这样它就不会受到较小的父元素的限制。

【讨论】：