이미지에서 반응 형 링크를 만드는 방법

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을 사용하고 img 태그 내에 class="img-responsive"을 사용할 수 있습니다.