Flexbox 高度和背景图片高度

Question

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

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

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

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

到目前为止我的编码：

.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

我建议在 child 上使用固定宽度而不是 %，因为 % 意味着它将占用向上 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>

Flexbox 高度和背景图片高度

Flexbox height and background image height

html

css

background-image

flexbox