我有一張大圖，換句話說，就是一張地圖。我也有附加到地圖某些位置的標記。在下面，您可以看到一個示例。
地圖和標記被包裹map-wraper并絕對定位。
HTML
<div class="map-wrapper">
<img src="map.png" id="map" alt="Map">
<img src="marker-1.png" id="marker-1" alt="Shop">
<img src="marker-2.png" id="marker-2" alt="House">
</div>
CSS
.map-wrapper {
position: relative;
}
#map {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#marker-1 {
position: absolute;
top: 140px;
left: 300px;
}
#marker-2 {
position: absolute;
top: 80px;
left: 40px;
}
問題是當我調整瀏覽器的大小時，標記會錯位。我希望標記也能按其父母的比例調整大小。在這種情況下map-wrapper。
我試過這個 CSS 技巧，但沒有幫助。https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
我不只是將標記與地圖合并的原因是我想給標記懸停效果。
提前致謝！
uj5u.com熱心網友回復：
在地圖上保持標記位置
對標記top和leftCSS 屬性使用相對百分比單位。
這樣，標記應該相對于它們相對定位的父容器保持在相同的位置<div >。
#marker-1 {
position: absolute;
top: ...%;
left: ...%;
}
#marker-2 {
position: absolute;
top: ...%;
left: ...%;
}
保持標記尺寸相對于包裝尺寸
對標記使用相對百分比單位height，并將它們設定width為auto。
這樣，標記應該相對于它們相對定位的父容器的<div >高度保持相同的大小。
#marker-1 {
... some properties here...
height: ...%;
width: auto;
}
#marker-2 {
... some properties here...
height: ...%;
width: auto;
}
uj5u.com熱心網友回復：
使用 calc() 函式根據瀏覽器大小 (%) 計算位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344719.html
下一篇：如何將flex中的文本與徽標對齊