使图像位置响应？

Question

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

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

我知道我使用的代码会发生这种情况，因为它将它设置到一个设定的位置。我想不出一种不同的（更好的）方法来做到这一点。这是我最初用来让他们到达这个位置的 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 的位置，并为不同的屏幕尺寸提供不同的位置来放置图像。但是，在某个时刻，如果页面变小，它就会开始缩小，所以我在这一点上摆脱了图像，因为没有（我发现）精确的方法来做到这一点。

使图像位置响应？

Making image positions responsive?

html

css

navbar

twitter-bootstrap