如何使圖像

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"。