如何解决我的容器和 div 框的大小调整问题答案

【问题标题】：how do i fix this resizing issue with my container and div boxes如何解决我的容器和 div 框的大小调整问题
【发布时间】：2019-12-04 08:54:17
【问题描述】：

如果有另一个帖子有这个答案，这将是一个很好的免责声明

请参阅有关我的问题的视频。我希望 div 和 header 在我放大和缩小时按比例调整大小。问题是当我调整 div 和 header 的大小时，它们彼此不对齐并且看起来很奇怪。

唯一的解决方案是媒体查询吗？

这是查看问题的 imgur 视频链接。

这是我到目前为止的代码。

容器框是橙色的，仅在构建设计时用于导航目的。盒子到最后不会有颜色。

html {
			background-color:#0000ff;
		}
		#container {
			background-color:orange;
			width:100%;
		}
		#title {
			text-align:center;
			color:#ffffff;
			box-shadow: #ffffff 0px 0px 10px 10px;
			margin:75px auto;
			width:75%;
			padding:20px 10px 20px 10px;
			border-radius: 5px;
			letter-spacing: 15px;
			font-size:25px;
			line-height: 30px;
		}

		#image {
			width:50%;
			box-shadow:#ff0000 0px 0px 10px 10px;
			margin-left:165px;
		}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mockup week three</title>
</head>
<body>
	<div id="container">
	<div id="title">
		Week three
	</div>
	<div id="gif">
<image id="image" src="https://media.giphy.com/media/l41m4rC9j8kMjXB0k/source.gif" width="100%"></image>
	</div>
	</div>
</body>
</html>

【问题讨论】：

标签： html css image responsive

【解决方案1】：

试试这个 - 我做了一些 CSS 编辑。

html {
			background-color:#0000ff;
		}
		#container {
			background-color:orange;
			width:100%;
		}
		#title {
			text-align:center;
			color:#ffffff;
			box-shadow: #ffffff 0px 0px 10px 10px;
			margin:75px auto;
			width:75%;
			padding:20px 10px 20px 10px;
			border-radius: 5px;
			letter-spacing: 15px;
			font-size:25px;
			line-height: 30px;
		}

    #gif {
			text-align:center;
			margin:75px auto;
			width:75%;
		}

		#image {
			width:100%;
			box-shadow:#ff0000 0px 0px 10px 10px;
		}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mockup week three</title>
</head>
<body>
	<div id="container">
	<div id="title">
		Week three
	</div>
	<div id="gif">
<image id="image" src="https://media.giphy.com/media/l41m4rC9j8kMjXB0k/source.gif" width="100%"></image>
	</div>
	</div>
</body>
</html>

【讨论】：