html - 图像在放大时移动，但在缩小时保持不变

Question

我正在为一个学校元素制作一个网站。一切都很顺利，直到我放大我的作品，facebook 图标和 map 超链接开始向左移动，它们的位置在缩小时似乎没有问题，因为它们完全符合它们的要求。我的代码写得很笨拙，我刚刚开始学习 CSS，所以请留下否定的回复。

CSS:

body {
    background-image: url("backgr.jpg");
    background-size: cover;
    overflow-x: hidden;
}
.site {
    background-image: url("repet.jpg");
    background-position: center top;
    background-repeat: repeat-x;
}
.all {
    position: relative;
}
.lin {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.fc {
    position: absolute;
    height: 50px;
    width: 50px;
    margin: 0 auto;
    left: 300px;
    right: 0;
    top: 55%;
}
.map1 {
    position: absolute;
    text-decoration: underline;
    font-family: "Myriad-Pro", Calibri;
    letter-spacing: -0.05em;
    font-style: condensed;
    font-size: 130%;
    color: white;
    left: 85px;
    text-align: center;
    width: 100%;
    top: 53.2%;
}
.map2 {
    position: absolute;
    text-decoration: underline;
    font-family: "Myriad-Pro", Calibri;
    letter-spacing: -0.05em;
    font-style: condensed;
    font-size: 130%;
    color: white;
    left: 80px;
    text-align: center;
    width: 100%;
    top: 70%;
}

HTML

<div class="all">
    <a href="https://www.facebook.com/MumbaiIndianStruma31Burgas/?fref=ts">
        <img src="fc.png" class="fc">
    </a>

    <a class="map1" href="https://www.google.bg/maps/place/Mumbai+Indian+Restaurant/@42.5047587,27.4665381,17z/data=!3m1!4b1!4m2!3m1!1s0x40a69490c9140d5d:0xe145b9d1e18c51ee">
 Карта
 </a>

    <a class="map2" href="https://www.google.bg/maps/place/Mumbai+Indian+Restaurant/@42.5047587,27.4665381,17z/data=!3m1!4b1!4m2!3m1!1s0x40a69490c9140d5d:0xe145b9d1e18c51ee">
Map
</a>
    <div class="site">
        <img src="line.jpg" class="lin">
    </div>
</div>

Fiddle demo

Answer 1

您可以使用 Padding left、Padding Right 和 margin 选项来设置图像