Question

我正在尝试制作一个在地图上有一些图标的网站。问题是，当我使窗口变小时，图标的位置错误，并且它们所处的位置与我希望的位置不同。我也不能使用引导程序来定位它们。仅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%;
   }
 }

它只更改了一段时间，因为随着分辨率的降低，我不得不添加另一种媒体，例如每100px，这并不是我认为的每个图标的选项。

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徽标一起使用。封面将根据其中的元素大小而增长和缩小。但是你不想要那样。

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

将背景尺寸更改为100% auto将使背景100％宽而不拉伸。我还添加了padding，以确保容器保持正确的高度比例，因为我们将制作徽标position: absolute，以免彼此冲突。

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

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

我添加了transform，因此徽标位于其位置的中心，而不是固定在徽标的左上方。我认为稍微容易一些，但不是必需的。

如果您在代码中发布一个codepen或jsfiddle链接，我们可以确保它可以正常工作，但否则，您可以使其适应当前的设置。

如何在不进行引导的情况下以较低的分辨率正确放置图像？

1 个答案: