イメージ上でレスポンシブリンクを作成する方法

Question

イメージにいくつかのリンクを追加しましたが、ページのサイズを変更するとリンクがその場所から移動しています。応答性に優れているので、ページのどの幅でも作業できます。

画像：image for the problem

htmlコード：

<div> 
    <img class="mainpage" src="img/landing.jpg" alt="Clup World" /> 
    <a href="#" title="signup" class="signup_link"></a> 
    <a href="#" title="Egypt" class="eg_link"></a> 
    <a href="#" title="Saudi Arabia" class="ksa_link"></a> 
    <a href="#" title="United Arab Emirates" class="uae_link"></a> 
    <a href="#" title="Bahrain" class="bh_link"></a> 
    <a href="#" title="Qatar" class="qa_link"></a> 
</div> 

CSSコード：

body 
    { 
     overflow: hidden; 
     margin:0; 
    } 
    .mainpage { 
     max-width:100% !important; 
     max-height:100% !important; 
     width:100%; 
     height:100%; 
     position:fixed; 
    } 
    .signup_link { 
     width:204px; 
     height:62px; 
     position:absolute; 
     display: block; 
     right:17px; 
     top:20px; 
     border-style: dashed; 
    } 
.eg_link { 
    width:50px; 
    height:70px; 
    position:absolute; 
    display: block; 
    left:515px; 
    bottom:60px; 
    border-style: dashed; 
} 
.ksa_link { 
    width:50px; 
    height:70px; 
    position:absolute; 
    display: block; 
    left:595px; 
    bottom:60px; 
    border-style: dashed; 
} 
.uae_link { 
    width:50px; 
    height:70px; 
    position:absolute; 
    display: block; 
    left:678px; 
    bottom:60px; 
    border-style: dashed; 
} 
.bh_link { 
    width:50px; 
    height:70px; 
    position:absolute; 
    display: block; 
    left:763px; 
    bottom:60px; 
    border-style: dashed; 
} 
.qa_link { 
    width:50px; 
    height:70px; 
    position:absolute; 
    display: block; 
    left:848px; 
    bottom:60px; 
    border-style: dashed; 
    } 

Answer 1

1. それらが応答するために、画像のためのwidth:100%; height:autoを与えてみてください。
2. bootstrapを使用して、class="img-responsive"をimgタグ内で使用できます。