Question

我有一个网页，由4列不同的div元素组成。页面没有滚动因此所有内容都在屏幕上。我的问题是如何在缩放内容时禁用div backrounds缩放，因为它会破坏页面结构体。当然，因为我使用不同的东西，所以应该在eveycase中工作背景大小trought媒体查询。我的第一个问题是可能的，并且它将在IE8中运行。

CODE：

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

Answer 1

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

min-width：100％;
最大宽度：100％;

这会冻结宽度，你也可以对高度做同样的事情。

缩放页面时禁用div背景调整大小

1 个答案: