使图像位置响应？

Question

我正在使用引导程序创建一个小型网站，但我已经停止了。我想在导航栏的任一侧添加这两个图像，但是，我不知道如何使位置响应。这是他们在一种浏览器大小下工作的示例。

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 的位置，并为不同的屏幕尺寸提供不同的位置来放置图像。但是，在某个时刻，如果页面变小，页面就会开始缩小，所以我此时删除了图像，因为没有（我发现）这样做的精确方法。