0

我有一个网页，它由列中设置的 4 个不同的 div 元素组成。该页面没有滚动，因此所有内容都在屏幕上。我的问题是如何在缩放内容时禁用 div 背景缩放，因为它会破坏页面结构。当然，这应该适用于eveycase，因为我使用不同的背景尺寸来处理媒体查询。我的第一个问题是无论如何都是可能的，它是否可以在 IE8 中工作。

代码：

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

#container {
    display: table;
    width: 100%; height:100%;
    border-spacing: 1px;
    background-color:black;
    margin-left:auto; margin-right:auto;
}

#container > div {
    display: table-cell;
    padding:0px;
}

body,html{ height:100%; width:100%; overflow:hidden; }

#div1{ position:relative;   
         background-image:url(../images/bg/left.jpg);
         background-size: cover;
     background-repeat:no-repeat;
  }
#div2{height:100%;
     background-image:url(../images/bg/center.jpg);
     background-size: 100% 100%;
     background-repeat:no-repeat;
     position:relative;
  }

#div3{height:100%; 
    background-image:url(../images/bg/right.jpg);
    background-repeat:no-repeat;
background-size:cover;
    position:static;    
  }

#div4{ height:100%; 
     background-image:url(../images/bg/right2.jpg);
     background-repeat:no-repeat;
 background-size:100% cover; 
 position: static;
 background-repeat:no-repeat; 
   }
4

1 回答 1

0

要使 div 大小不变缩放（但不是其中的内容），请执行以下操作：
在该 div 的 css 中：

最小宽度：100%；
最大宽度：100%；

这将冻结宽度，您也可以对高度执行相同操作。

于 2014-02-05T14:28:53.877 回答