Fatal编程技术网
  • css/
  • Css 在使页面具有响应性时，如何消除内容行之间的空间？

Css 在使页面具有响应性时，如何消除内容行之间的空间？

css

Css 在使页面具有响应性时，如何消除内容行之间的空间？,css,flexbox,frontend,css-grid,web-frontend,Css,Flexbox,Frontend,Css Grid,Web Frontend,我正在进行我的第一个portofolio项目（我正在学习Udacity课程）。 我最近研究了一些关于响应性的问题，但我很难理解哪个是哪个（flexbox/grid系统）。因此，我甚至不知道我现在用的是什么。网格？Flexbox？我完全糊涂了 我目前面临的问题是，如何在使页面响应时消除内容行之间的空格（例如，当视口小于1200px时，我的主图像与其余内容之间的间隙会变得很大）。 请帮帮我 以下是我的总体代码： 下面是我所说的： 您在.image上设置了600px的高度，因此当页面变得更窄时，图像

我正在进行我的第一个portofolio项目（我正在学习Udacity课程）。 我最近研究了一些关于响应性的问题，但我很难理解哪个是哪个（flexbox/grid系统）。因此，我甚至不知道我现在用的是什么。网格？Flexbox？我完全糊涂了

我目前面临的问题是，如何在使页面响应时消除内容行之间的空格（例如，当视口小于1200px时，我的主图像与其余内容之间的间隙会变得很大）。 请帮帮我

以下是我的总体代码：

下面是我所说的：

您在
.image
上设置了600px的高度，因此当页面变得更窄时，图像会填满顶部，您会看到空白处有一个间隙

我从更改了
.image
上的样式

height:600px;
到

这是在容器上保持16:9纵横比的一个小技巧，该容器根据父容器的宽度设置总高度

您在
.image
上设置了600px的高度，因此当页面变得更窄时，图像会填满顶部，您会看到空白处有一个间隙

我从更改了
.image
上的样式

height:600px;
到

这是在容器上保持16:9纵横比的一个小技巧，该容器根据父容器的宽度设置总高度

可能是由于
高度：600px
选择器中的code>可能是由于高度：600px在
.image
选择器中 
height: 0;
padding-bottom: 56.25%