Question

当我们改变浏览器的宽度和高度时，

可以控制顶部的红色图像。

我认为这是由＆＃34;全屏＆＃34;在文章标签中。

<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元素中，这样它就不会受到小元素元素的限制。

如何将全屏应用于图像

2 个答案: