Fatal编程技术网
  • html/
  • Html 在不同视口宽度下缩放背景图像高度而不进行媒体查询？

Html 在不同视口宽度下缩放背景图像高度而不进行媒体查询？

html css

Html 在不同视口宽度下缩放背景图像高度而不进行媒体查询？,html,css,flexbox,background-image,viewport,Html,Css,Flexbox,Background Image,Viewport,我正在做一个项目，在这个项目中，我有一个英雄形象作为我的html标题的背景形象 在它的正下方，我有一个flex容器，其中有两个项目在整个视口窗口中的空间中，并根据视口大小调整大小。当浏览器窗口处于较大的视口大小时，这看起来很好，但是，当我开始向下缩放窗口时，英雄图像和flex容器之间开始显示一些空白。我希望flex容器始终直接位于英雄图像的底部 我意识到这可能是因为英雄图像有一个固定的高度，并且不灵活，因为无论视口大小如何，它总是试图以700px的速度渲染高度 我也知道你可以根据CSS中的断点来

我正在做一个项目，在这个项目中，我有一个英雄形象作为我的html
标题的
背景形象

在它的正下方，我有一个flex容器，其中有两个项目在整个视口窗口中的空间中，并根据视口大小调整大小。当浏览器窗口处于较大的视口大小时，这看起来很好，但是，当我开始向下缩放窗口时，英雄图像和flex容器之间开始显示一些空白。我希望flex容器始终直接位于英雄图像的底部

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

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

我附上了截图，这样你就可以准确地了解我的问题了

这是我的大尺寸视口窗口：

这是我的视口窗口，尺寸稍小一些：

进一步澄清：

这是我的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>


提前谢谢

编辑：空白问题已通过
背景尺寸：封面解决或
背景大小：自动100%
。我遇到的问题是，当我调整视口窗口的大小时，当flex容器随视口窗口移动时，英雄图像的右侧会被裁剪，因为我正在缩小它。在我调整尺寸时，有没有办法使它保持在中心位置


这里是一个屏幕截图：
更改
背景大小：100%至<代码>背景尺寸：封面或<代码>背景大小：自动100%这绝对是朝着正确方向迈出的一步，因为它解决了我的主要问题，所以谢谢你！但是，当我调整图像大小时，图像不再位于视口窗口的中心。当我缩小视口时，图像的右侧会不断被裁剪。如果您需要我进一步解释，我可以发布另一个屏幕截图……您可以使用
背景位置
控制定位，例如
背景位置：居中
，或
背景位置：中上，或
背景位置：左上等。。。更多阅读：那就行了！非常感谢！

/*-----------------------------------------------
*   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%;
  }
}