javascript - 如何在没有 Bootstrap 的情况下使图像在较低分辨率下正确定位？

Question

我正在尝试制作在 map 上有一些图标的网站。问题是，当我制作窗口时，较小的图标位置错误，而且它们的位置与我希望的不同。我也不能使用 bootstrap 来定位它们。仅 HTML、CSS 和 JS/jQuery。

选项 1:https://imgur.com/a/ifKFXRL 选项 2:https://imgur.com/a/R5DmQbt

我已经试过了:

   min-height:100%;
    min-width:100%;
}
@media only screen and (max-width: 1000px) {
 body .background .foodini-logo img{
        width:15%;
        height:15%;
        margin-top: 10%
        margin-left:12%;
   }
 }

它只改变了一段时间，因为随着分辨率越来越低，我不得不添加另一个媒体，比如每 100 像素，我认为这不是每个图标的选项。

html{
   height:100%;
    width:100%;
}
body {
    background: url("../img/bg.png") no-repeat center center fixed;
    background-size: cover;
    background-color:rgb(178,212,238);

}
.
.
.
body .background .foodini-logo{
        margin-top:15%;
        margin-left:17%;

}
body .background .haps-logo {
        margin-top: 35%;
        margin-left: 23%;
}

我希望这个图标始终如选项 1 所示，无论用户的屏幕分辨率如何。

Answer 1

棘手的部分是您尝试将 background-size: cover 与 position: relative Logo 一起使用。 Cover 将根据其中元素的大小来增长和收缩。但你不希望那样。

.background {
    background: url("../img/bg.png") no-repeat center center fixed;
    background-size: 100% auto;
    background-color: rgb(178,212,238);
    padding-bottom: 65%;
}

将 background-size 更改为 100% auto 将使背景 100% 宽而不拉伸(stretch)。我还添加了 padding 以确保容器保持正确的高度比，因为我们要制作 Logo position: absolute 这样它们就不会相互冲突其他。

.logo {
    position: absolute;
    transform: translate(-50%, -50%);
}

.haps-logo {
    top: 35%;
    left: 23%;
}

我添加了 transform，因此 Logo 以其位置为中心，而不是固定在 Logo 的左上角。我认为更容易一些，但不是必需的。

如果您发布包含您的代码的 codepen 或 jsfiddle 链接，我们可以确保它有效，否则，您可以根据您当前的设置进行调整。