DIVの背景画像との絶対位置

Question

背景画像の上にいくつかのDIVを配置する予定ですが、うまく機能していないようです。 DIVの位置は、画面サイズが変わると変化します。メディアクエリは解決策ではありません。どんな助け？

HTML

<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')"> 
    <div class="cities Delhi"></div> 
    <div class="cities Bangalore"></div> 
</div> 

CSS：

.div-bg { 
    height: 85vh; 
    min-height: 500px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    position: relative; 
} 
.cities { 
    border: 1px solid red; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background-color: red; 
} 
.cities.Delhi { 
    position: absolute; 
    top: 150px; 
    left: 175px; 
} 
.cities.Bangalore { 
    position: absolute; 
    top: 250px; 
    left: 275px; 
} 

JSFIDDLE DEMO

Answer 1

あなたはコンテナに固定幅を設定している場合

.div-bg{ width:700px;} 

はあなたの問題を修正します

Answer 2

赤い点の位置は変わりません。div-bg内の背景画像の位置は変更されています。サイズ変更中にdivを調べると、表示されます。これが起こらないようにする1つの方法は、divに固定幅と高さを与えることです。アップデートfiddleをチェックしてください。

width: 500px; 

Answer 3

.div-bg{ 
    width:555px; 
} 

あなたのコードに、このCSSを追加します。

Answer 4

画像の寸法は、vmin単位を使用してください。これは、ビューポートの寸法にうまく適応します。

とパーセンテージの都市の位置を設定

.div-bg { 
 
    height: 100vmin; 
 
    width: 100vmin; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    position: relative; 
 
} 
 
.cities { 
 
    border: 1px solid red; 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 50%; 
 
    background-color: red; 
 
} 
 
.cities.Delhi { 
 
    position: absolute; 
 
    top: 27%; 
 
    left: 30%; 
 
} 
 
.cities.Bangalore { 
 
    position: absolute; 
 
    top: 85%; 
 
    left: 33%; 
 
}

<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')"> 
 
    <div class="cities Delhi"></div> 
 
    <div class="cities Bangalore"></div> 
 
</div>