使页面响应时如何摆脱内容行之间的 space？
How to get rid of the space between content rows when making a page responsive?
我正在做我的第一个作品集项目（我正在上 Udacity 的课程）。
我最近研究了一些关于响应性的知识，但我很难全神贯注并理解哪个是哪个（flexbox/网格系统）。因此，我什至不确定我现在使用的是什么。网格？弹性盒子？我完全糊涂了。
我目前面临的问题是如何在使页面响应时去掉内容行之间的空格（例如，当视口小于 1200px 时，我的主图像和其余内容之间的间隙变得巨大）。
请帮助我。
这是我的总体代码：
https://codepen.io/antobloop/pen/LdjZmW
@media screen and (max-width: 1250px){
body {
???
}
}
这就是我所说的：
Gap between content
您在 .image 上设置了 600 像素的高度，因此当页面变窄时，图像会填满顶部，您会在空白处看到一个空隙 space。
我从
更改了 .image 的样式
height:600px;
至
height: 0;
padding-bottom: 56.25%
这是一个小技巧，可以在根据父容器的宽度设置总高度的容器上保持 16:9 纵横比。
我正在做我的第一个作品集项目（我正在上 Udacity 的课程）。 我最近研究了一些关于响应性的知识，但我很难全神贯注并理解哪个是哪个（flexbox/网格系统）。因此，我什至不确定我现在使用的是什么。网格？弹性盒子？我完全糊涂了。
我目前面临的问题是如何在使页面响应时去掉内容行之间的空格（例如，当视口小于 1200px 时，我的主图像和其余内容之间的间隙变得巨大）。 请帮助我。
这是我的总体代码： https://codepen.io/antobloop/pen/LdjZmW
@media screen and (max-width: 1250px){
body {
???
}
}
这就是我所说的： Gap between content
您在 .image 上设置了 600 像素的高度，因此当页面变窄时，图像会填满顶部，您会在空白处看到一个空隙 space。
我从
更改了.image 的样式
height:600px;
至
height: 0;
padding-bottom: 56.25%
这是一个小技巧，可以在根据父容器的宽度设置总高度的容器上保持 16:9 纵横比。