1

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

当我们改变浏览器高度时，这个来源被添加了高度样式。我明白了。

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

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

4

2 回答 2

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;
}
于 2014-05-25T13:17:18.900 回答
0

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

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

如果这不起作用，你可以做同样的事情

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

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

于 2014-05-25T13:02:27.140 回答