Question

我在图片上添加了一些链接，但是当我调整页面大小时，链接正在从他们的位置移动。任何帮助他们做出响应的帮助，所以他们可以使用任何页面的宽度？

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

尝试为图片提供width:100%; height:auto以使其响应。
您可以使用bootstrap，然后在img标记内使用class="img-responsive"。

如何在图像上制作响应式链接

1 个答案: