Question

我正在开展一个项目，我的html background-image标记为header。

直接在下面我有一个Flex容器，在整个视口窗口中，该空间本身有两个项目，并根据视口大小调整大小。当浏览器窗口处于大视口大小时，这看起来很好，但是，当我开始缩小窗口时，开始在英雄图像和弹性容器之间显示一些空白。我希望灵活容器始终直接停留在英雄形象的底部。

我意识到这可能是因为英雄形象上有一个固定的高度并且不灵活，因为无论视口大小如何，它总是试图将高度渲染为700px。

我也知道你可以根据CSS中的断点来调整大小，但我只是想知道是否还有其他方法可以做到这一点。

我附上了截图，因此您可以准确地了解我要问的内容

这是我的大型视口窗口：http://i.imgur.com/J81b7OO.jpg

这是我的视口窗口，尺寸略小：http://i.imgur.com/CfjAyZG.jpg

进一步澄清：

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type = "text/css" href="css/normalize.css">
<link rel="stylesheet" href="css/build/main.css">
<title>Summer Breeze</title>
</head>
<body>
<header class = "hero">
</header>
<div class = "container">
  <div id = "stay">
  <div id = "staySquare"></div>
  </div>
  <div id = "gazebo">
  <div id = "gazeboPic"></div>
  </div>
</div>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="js/build/app.min.js" type="javascript"/>
</body>
</html>

这是我的SCSS：

/*-----------------------------------------------
*   Base
-----------------------------------------------*/
$light-brown : #ddcebb;

body {
  margin: 0px;
  padding: 0px;
}
/*-----------------------------------------------
*   Hero
-----------------------------------------------*/
.hero {
  background-image: url("../../img/house_front.jpg");
  background-repeat: no-repeat;
  background-size:100%;
  height: 700px;
}

.container {
  display: flex;
  height:260px;
}

#stay {
  background-color: $light-brown;
  font-size: 100px;
  padding:30px;
  width: 45%;

  #staySquare {
    margin: 0 auto;
    display: flex;
    height: 200px;
    width: 100%;
    border: 2px solid black;
  }
}

#gazebo{
  background-color: mistyrose;
  width: 55%;

  #gazeboPic {
    background-image: url("../../img/walkway-to-Beach.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
  }
}

提前致谢！

编辑：空格问题已通过background-size: cover;或background-size: auto 100%解决。我遇到的问题是当我调整视口窗口的大小时，当我使Flex容器与视口窗口一起移动时，我正在缩小英雄图像的右侧。在我调整大小时，有没有办法让这个中心化？

以下是截图：http://i.imgur.com/RNSWVTq.jpg

在没有媒体查询的情况下缩放不同视口宽度的背景图像高度？

0 个答案: