2013-08-18 2 views
0

У меня есть веб-страница, состоящая из 4 разных элементов div, установленных в столбцах. На странице нет прокрутки, поэтому весь контент находится на экране. Мой вопрос заключается в том, как отключить масштабирование div при масштабировании содержимого, поскольку оно разрушает структуру страницы . И, конечно, это должно работать в eveycase, потому что я использую разные обратные размеры, вызванные медиа-запросами. Мой кулачный вопрос в том, что это возможно, и будет работать в IE8.Отключить изменение размера фона div при масштабировании страницы

КОД:

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

Я не думаю, что вы можете это сделать. Попробуйте прочитать это: http://stackoverflow.com/questions/6458793/can-i-stop-the-resizing-of-elements-on-zoom – Itay

ответ

0

Для того, чтобы размер ДИВ инвариант масштабирования (но не содержание внутри него) сделайте следующее:
Внутри вашего CSS для этого DIV:

мин-ширина: 100%;
max-width: 100%;

Это заморозит ширину, вы можете сделать то же самое и для высоты.

Смежные вопросы