html - 在调整大小时让每个项目都位于完全相同的位置

Question

我有以下设计，看起来像 1920x1080 的左侧版本。当我调整窗口大小时，我希望设计看起来与“巨大”版本完全一样。因此，不仅仅是缩放的背景（带有“封面”）和在没有更多空间时缩放的图像（“宽度：100%”），而是每个项目都会立即缩放并且设计总是看起来“相同”。

主要的事情/原因是蓝色背景。它在黄色物品周围有透明边缘。现在，当我调整大小时，项目并不总是落入“同一个地方”，因此透明的“插槽”不再匹配。

现在，当我调整窗口大小时，黄色“条”的一部分移动成两行等。请注意，调整大小只是指具有相同纵横比（1920x1080 -> 1024x576 等）的调整大小。

这是它的实际操作：https ://codepen.io/sigug/full/wjeavE/

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;
}

<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>

标签： htmlcssresponsive