如何将全屏应用于图像

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;
}

Answer 2

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

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

如果那行不通，您可以这样做

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

这些将根据父元素的大小工作。 如果您尝试将其作为BG图像，则尝试插入html元素或body元素，以使其不受较小的父元素的限制。