如何修复特定的CSS位置缩放百分比

Question

如何以百分比形式修复特定的CSS位置缩放？ The jump occurs during manual scaling in the browser. 代码：

jsfiddle: http://jsfiddle.net/y5b576cm/2/

Answer 1

尽可能避免在宽度和高度上使用百分比，它们非常混乱。

首先，让您的顶部容器具有相同的固定宽度：

section.h-banner {
width: 66.444%;
position: relative;
margin: 0 auto;
left: -3.666%;

}

然后对齐子容器

.container-header {
text-align: center;
margin: 0px -12%;
left: 12.7%;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;

}

但又一次，非常凌乱..