Flexbox 高度和背景图像高度

Posted 2023-03-05

【中文标题】Flexbox 高度和背景图像高度

【英文标题】：Flexbox height and background image height

【发布时间】：2022-01-21 16:42:51

【问题描述】：

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

【参考方案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>

【讨论】：

嗨，谢谢?????超级骗子?你知道如何将父容器的高度设置为与背景图像相同的高度，并且仍然使其响应吗？跨度>

一个初学者? 抱歉，没有向下滚动足够远来查看您使用 发送的整个代码哦，非常感谢，现在我了解了整个容器中的背景图像。我现在很开心。 ?