Как сделать ответные ссылки на изображение

Я добавил некоторые ссылки на изображение, но когда я изменяю размер страницы, ссылки перемещаются со своих мест. Любая помощь, чтобы сделать их отзывчивыми, поэтому они будут работать с любой шириной страницы?Как сделать ответные ссылки на изображение

изображение: 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; 
    }

источник

2016-11-23 user3745594

Почему бы вам просто не обернуть ссылку на изображение? Таким образом, вам не нужно было бы использовать абсолютную позицию и попытаться сделать «наложение»? Пример: '' ... –

проблема: 'ширина: 100%; height: 100%; 'на' .mainpage' вы пытались использовать фиксированные с и высоту? –

Для наиболее последовательных результатов эта кнопка действительно должна быть автономным элементом, сидящим над изображением, а не частью изображения. – UncaughtTypeError

попытаться дать width:100%; height:auto для изображений, чтобы сделать их отзывчивыми.
вы можете использовать bootstrap, а затем использовать class="img-responsive" в теге img.

источник

2016-11-23 17:31:05

спасибо, но это та же проблема – user3745594

Как сделать ответные ссылки на изображение

ответ

Смежные вопросы