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更改图像的位置，并为不同的屏幕尺寸提供放置图像的不同位置。但是，在某一点上，如果页面变得很小，页面会开始缩小，所以我在这一点上摆脱了图像，因为没有（我已经找到）精确的方法。

使图像位置响应？

1 个答案: