Flexbox 高度和背景图像高度

Question

我是 html 和 CSS 的初学者，我会尝试制作带有可点击点的地图，但我做的不正确。 我收到了关于使用 flexbox 并创建一个以地图为背景图像的容器以及创建单独的容器来保存可点击点的图像按钮的提示。该解决方案必须具有响应能力，并且适用于桌面和移动设备。

我首先尝试让背景图像和点/（框）调整大小，然后尝试在点/（框）上设置位置，但我已经遇到了背景图像和父容器。 因为我无法将父容器的高度设置为与背景图片相同的高度，所以现在只显示了一半的图片。 如果我插入父容器的高度等于背景图片的像素，背景图片将不会响应调整大小。

有谁知道如何将背景图像和容器的高度设置为相同，或者可能知道更好的解决方案？

在这种情况下，我很高兴收到您的来信:-)

到目前为止我的编码：

.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("Images/home/map_front.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.flexbox-point {
  width: 20%;
  margin: 20px;
  border: 3px solid #B90F12; /* Color to see the points/boxes */
}

.flexbox-point1 {
  min-height: 100px;
}

.flexbox-point2 {
  min-height: 100px;
}

.flexbox-point3 {
  min-height: 100px;
}

<!-- Test for flexbox with map as BG-picture*---->
<div class="map-container">
  <div class="flexbox-point flexbox-point1"></div>
  <div class="flexbox-point flexbox-point2"></div>
  <div class="flexbox-point flexbox-point3"></div>
</div>

Answer 1

我建议在您的孩子上使用固定宽度而不是 %，因为 % 意味着它会占用屏幕宽度 20%，这会在调整浏览器大小时占用可以变得非常小。要将背景图像居中，您可以使用background-position: center; 见下文。

.map-container{
    display: flex; 
    justify-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; 
    background-image: url("https://dummyimage.com/400x400/000/fff");
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
} 


.flexbox-point{

    width: 400px;
    margin: 20px;
    border: 3px solid #B90F12;    /* Color to see the points/boxes */
} 

.flexbox-point1 {
    min-height: 100px;
} 

.flexbox-point2 {
    min-height: 100px;
} 

.flexbox-point3 {
    min-height: 100px;
}

<div class="map-container">
   
        <div class="flexbox-point flexbox-point1"></div>
        <div class="flexbox-point flexbox-point2"></div>
        <div class="flexbox-point flexbox-point3"></div>

    
   
</div>

EX 具有不同高度的背景图片。

.map-container{
    display: flex; 
    justify-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG");
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
} 


.flexbox-point{

    width: 400px;
    margin: 20px;
    border: 3px solid #B90F12;    /* Color to see the points/boxes */
} 

.flexbox-point1 {
    min-height: 100px;
} 

.flexbox-point2 {
    min-height: 100px;
} 

.flexbox-point3 {
    min-height: 100px;
}

.container {
  height: 100vh;
}

<div class="container">
<div class="map-container">
   <div class="flexbox-point flexbox-point1"></div>
   <div class="flexbox-point flexbox-point2"></div>
   <div class="flexbox-point flexbox-point3"></div>
</div>
</div>