html - 使图像位置响应？

Question

我正在使用 bootstrap 制作一个小型网站，但我已经停止了。我想在导航栏的任一侧添加这两个图像，但是，我无法弄清楚如何使位置响应。这是它们在一种浏览器尺寸下工作的示例。

Working

但是，当它的尺寸不同时，图像开始看起来像这样。

Not Working

我知道我使用的代码会发生这种情况，因为它将它设置到一个设定的位置。我想不出一种不同的(更好的)方法来做到这一点。这是我最初用来让他们到达这个位置的 CSS。

#wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 61px;
    z-index: 200;
}

#wrap-right {
    position: absolute;
    visibility: visible;
    left: 705px;
    top: 61px;
    z-index: 200;
}

这是图像的 HTML

        <div id="wrap-left">
            <img src="assets/img/wrap-left.png">
        </div>

        <div id="wrap-right">
            <img src="assets/img/wrap-right.png">
        </div>

提前致谢。

编辑:使用百分比可以使它变得更好，但是，它并不完美。

编辑:当我稍后使用我的计算机时，将尝试搞乱@media 查询。希望这就是我的答案。

Answer 1

我找到了问题的答案。我需要做的是在我的 css 中针对某些屏幕尺寸使用 @media 查询。这是我用来解决这个问题的代码。

@media only screen
and (max-width : 767px) {
    #wrap-left {
        display: none;
    }
    #wrap-right {
        display: none;
    }
}

@media only screen 
and (min-width : 992px) {
    #wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 81px;
    z-index: 200;
}
    #wrap-right {
    position: absolute;
    visibility: visible;
    left: 925px;
    top: 81px;
    z-index: 200;
}
}

@media only screen
and (min-width : 1200px) {
    #wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 89px;
    z-index: 200;
}
    #wrap-right {
    position: absolute;
    visibility: visible;
    left: 1125px;
    top: 89px;
    z-index: 200;
}
}


@media only screen 
and (min-width : 1824px) {
    #wrap-left {
    position: absolute;
    visibility: visible;
    left: -5px;
    top: 89px;
    z-index: 200;
}
    #wrap-right {
    position: absolute;
    visibility: visible;
    left: 1125px;
    top: 89px;
    z-index: 200;
}
}

通过对某些屏幕尺寸使用这些媒体查询，我能够更改图像使用其 ID 的位置，并为不同的屏幕尺寸提供不同的位置来放置图像。然而，在某个时刻，如果页面变小，它就会开始缩小，所以我在这一点上去掉了图像，因为没有(我发现)精确的方法来做到这一点。