如何在缩放级别更改时使两个元素完好无损？

Question

我有一个带有横幅和底部边框的简单标签。如何停止在缩放时滑动这两个元素？我一直在寻找一种方法来使这两个元素在放大和缩小时保持完整。即使经过几个小时的搜索，我也无法获得所需的输出。我试过 this 和另一个 post 说要从 px 更改为 em.

我的 html 标签：

<head>    
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />  
</head>
<body> 
    <div id="header">            
      <img class="logo" src="./style/logo.jpg" width= 895 height= 160">         
    </div>
  <div id="container-border">           
  </div>
</body>

css:

 #header
{ padding:0 20px;
  display:block;
  margin:0 auto;
  background: #D6D6D6 url(background.jpg) repeat-x;
  height: 205px;
  width: 1500px;
  position: center;
}


  #container-border {  
  width: 1538px;
  height:900px;
  margin-left:260px;
  border-color: black;
  border-width: 1px;
  border-style: solid;  
}

Answer 1

您首先需要将内容包装在包含 DIV

HTML

  <div class="site-content">
      <div id="header">            
        <img class="logo" src="./style/logo.jpg" width= 895 height="160">         
      </div>
    <div id="container-border">           
    </div>
  </div>

注意新的 DIV .site-content。这是您将网站内容居中并控制网站内容宽度的地方。

这是我的代码笔：https://codepen.io/arlcode/pen/aRpWZo

我还建议不要将静态 width/height 用于移动动态目的。您还需要使用类，而不是 ID，因为 ID 是特定的，但类允许您一次操作多个 DIV。

如何在缩放级别更改时使两个元素完好无损？

How to make two elements intact on zoom level change?

html

css

alignment

zooming