调整大小时，每个项目都在完全相同的位置

Question

我有以下设计，看起来像1920x1080中的左侧版本。当我调整窗口大小时，我希望设计看起来与＆＃34;巨大的＆＃34;版。因此，不仅仅是缩放的背景（使用＆＃34;封面＆＃34;）和在没有更多空间时缩放的图像（＆＃34;宽度：100％＆＃34;）但是每个项目都会立即缩放设计总是看起来相同＆＃34;。

主要/原因是蓝色背景。它有黄色项目周围的透明边缘。现在，当我调整大小时，这些项目并不总是落入同一个地方，因此透明的＆＃34;插槽＆＃34;不再匹配了。

现在，当我调整窗口大小时，部分黄色＆＃34; bar＆＃34;请注意，通过调整大小我只是指具有相同宽高比（1920x1080 - > 1024x576等）的调整大小。

以下是它的实际应用：https://codepen.io/sigug/full/wjeavE/

＆＃13;

＆＃13;

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #fd1dfa;

}

@keyframes move_header {
    from { top: -200px; }
    to { top: 0px; }
}

@keyframes move_footer {
    from { bottom: -200px; }
    to { bottom: 0px; }
}

#header {
	position: fixed;
	top: 0px;
	width: 100%; 
	height: 200px;

	background: url(https://preview.ibb.co/b3u2b7/background_header.png) repeat-x center top, linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
	background-size: cover;

	animation-name: move_header;
    animation-duration: 1.8s;
		text-align: center;
}

#footer {
	position: fixed;
	bottom: 0px;
	width: 100%; 
	height: 200px;

	background: url(https://preview.ibb.co/i6jPpS/background_footer.png) repeat-x center bottom, linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
	background-size: cover;

	animation-name: move_footer;
    animation-duration: 2s;
	text-align: center;
}



img {	width: 100%;
	height: auto;}

#header #bar {
	position: relative;
	top: 115px;
}

#footer #bar {
	position: relative;
	top: 15px;
}

#header #line_left {
	display: inline-block;

	width: 40%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/header_line_left.png) repeat-x left center;
}

#header #icons {
	display: inline-block;
  	margin: auto auto;

	max-width: 200px;
	text-align: center;
}

#header #line_right {
	display: inline-block;

	width: 40%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/header_line_right.png) repeat-x right center;
}


#footer #line_left {
	display: inline-block;

	width: 30%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/footer_line_left.png) repeat-x left center;
}

#footer #icons {
	display: inline-block;
  	margin: auto auto;

	max-width: 900px;
	text-align: center;
}

#footer #line_right {
	display: inline-block;

	width: 30%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/footer_line_right.png) repeat-x right center;
}


#footer li, #header li {
	list-style-type: none;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.7;
}

#footer li:hover {
	opacity: 1;
}

#footer li .left {
	max-width: 50px;
}

#footer li .space {
	max-width: 20px;
}

#footer li .center {
	max-width: 70px;
}

#footer li .right {
	max-width: 50px;
}

#header li .center {
	max-width: 70px;
}

＆＃13;

<div id="header">
	<div id="bar">
		<div id="line_left"></div>
		<div id="icons">
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
		</div>
		<div id="line_right"></div>
	</div>
</div>


<div id="footer">
	<div id="bar">
		<div id="line_left"></div>
		<div id="icons">
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>

			<li><img src="https://image.ibb.co/gocNb7/blank.png" class="space"></li>

			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>

			<li><img src="https://image.ibb.co/gocNb7/blank.png" class="space"></li>

			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
		</div>
		<div id="line_right"></div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;