我是 html 和 CSS 的初學者，我將嘗試制作帶有可點擊點的地圖，但我沒有做對。我收到了使用 flexbox 并創建一個以地圖作為背景影像的容器，并創建可以為可點擊點保存影像按鈕的單獨容器的提示。該解決方案必須具有回應性并且適用于桌面和移動設備。
我首先嘗試讓背景影像和點/（框）調整大小，然后嘗試設定點/（框）上的位置，但我已經遇到了背景影像和父容器的問題。因為我無法將父容器的高度設定為與背景圖片相同的高度，所以現在只顯示了一半的圖片。如果我插入的父容器的高度等于以 px 為單位的背景影像，背景影像將不會回應調整大小。
有誰知道如何將背景影像和容器的高度設定為相同，或者可能知道更好的解決方案？
在這種情況下，我很高興收到您的來信:-)
到目前為止我的編碼：
.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>uj5u.com熱心網友回復：
我建議在您的孩子上使用固定寬度而不是%，因為%意味著它將占用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386902.html