背景附件：滚动在缩小时无法正确呈现

Question

25％缩放和100％缩放的两个图像。我想实现的东西像我面临这个

required model

的问题是第一件事情是我有一个头，其中有其中有四样东西回家，一下，导航栏...。当我将缩放比例降低到25％。导航栏项目正在离开div.it.

第二件事是当我缩小缩放百分比时，图像不能正确渲染，它的尺寸正在减小。

我面临的第三个问题是header-cont（div）和center-cont（div）在合并。我知道这是与边缘折叠相关的东西，但我无法解决。 我是初学者请帮助我。

jsfiddle of my problem

例如：

<div id="page"> 
<div id="header-cont"> 
      <div id="header"> 
      <div id="logo"> 
       <a href="index.html" ><img src="bingo.png" /></a> 
      </div> 
      <ul id="navigation"> 
        <li bgcolor="green"> 
         Home     
        </li> 
        <li> 
         About 
        </li> 
        <li> 
         Insurance 
        </li> 
        <li> 
         Contact Us 
        </li> 

      </ul> 
    </div> 
    </div> 

<div id="center-cont"> 
     <div id="center"> 
       <div id="content"> 
       <h3>Travel Insurance</h3> 
       </div> 
     </div> 
</div> 

<div id="footer-cont"> 
     <div id="footer"> 

     </div> 

</div> 

<div id="end-cont"> 
     <div id="end"> 

     </div> 

</div> 
</div> 

CSS：

body 
{ 
    margin:0 auto; 
} 

#page 
{ 
    height:2400px; 
    margin:0 auto; 
    width:1000px; 
} 
#header-cont 
{ 
    position:fixed; 
    width:inherit; 
    z-index:1; 
    padding-top:1px; 
} 
#header 
{ 
    position:relative; 
    background-color:black; 
    height:80px; 
    background-image:url(header.png) repeat-x; 
} 
#logo 
{ 
    position:relative; 
    margin-top:auto; 
    margin-left:100px; 
    float:left; 
} 
#navigation 
{ 
    margin-left:150px; 
    display:inline-block; 
    list-style:none; 
    color:white;  
} 
#navigation li 
{ 
    position:relative; 
    float:left; 
    font-size:18px; 
    font-family:Arial, Helvetica, sans-serif; 
    margin:12px 30px 
} 
#center-cont 
{ 
    position:relative; 
    //padding:1px; 
    //margin-top:20px; 
    width:1000px; 
    //margin:0 auto; 
} 
#center 
{ 
    height:800px; 
    background-image:url(travel.png); 
// background-position:center center; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
// background-size:cover; 
    min-height:100%; 
    min-height:100%; 
} 
#content 
{ 
    z-index:10; 
    color:blue; 
} 
#footer-cont 
{ 
    //position:fixed; 
    width:1000px; 
    top:250px; 
    margin:0 auto; 
} 
#footer 
{ 
    background-color:green; 
    height:100px; 
    //background-attachment:fixed; 
} 
     #end-cont 
     { 
    width:1000px; 
    // top:300px; 
    margin:0 auto; 
     } 
     #end 
     { 
    background-attachment:fixed; 
    background-image:url(health.jpg); 
    background-repeat:no-repeat; 
    height:800px; 
     } 

我为我的劣质压痕非常抱歉。

Answer 1

只是几个问题。你用浏览器缩放吗？如果是的话，为什么？ 如果它是可访问性的情况下，它有一个更好的做法，有一个切换选项来增加某些元素的大小。 使用浏览器缩放浏览器时，浏览器使用分数和元素大小舍入的方式时，您总会遇到问题。 要么留出扩展空间，要么检查为什么需要该网站使用浏览器缩放功能。