css - 如何以百分比修复特定的 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;

但是还是很乱..