如何在不同的分辨率下使图像不会从位置移动？

Question

在第一张图片中，您可以看到徽标位置正确，但是当我更改分辨率时：

但是当你在不同的分辨率下尝试它时，它开箱即用：

我只是想在我调整浏览器大小或尝试不同的分辨率时，徽标将保留在框内。

＆＃13;

＆＃13;

<div class="images">
    <a href="https://www.csgolive.com/affiliates">
        <img src="images/CSGOLive.png" alt="" width="165px" height="63px" style="display: inline-block;no-repeat center fixed; max-height 3.52%: ; max-width: 8.6%; position: absolute; right: 70.5%; bottom: 77%; min-height: 63px; min-width: 165px; height: auto; width: auto;">
    </a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要在分辨率高于或低于某个阈值时应用不同的样式，您需要在css中使用@media查询。

您可以包含这样的条件文档：

    <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

或者在同一文档中添加特定样式，如下所示：

    <style>
    @media (max-width: 700px) {
      .gun_icon {
        margin-bottom: 100px;
      }
    }
    </style>

这可以让你到达你需要去的地方： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

您将其定位为绝对值，将图像从布局流中取出。

我建议将它绝对定位到具有px坐标的相对父级，以避免百分比/灵活单位的更改。

Resizable Fiddle

• 您的内联样式有几个CSS语法错误，请尝试将它们移动到外部样式表。

像这样：

.images {
  /* these 2 just for demo */
  border: 1px solid red;
  height: 110px;
  /* new */
  position: relative;
}

img {
  display: inline-block;
  background: no-repeat center fixed;
  position: absolute;
  /* new */
  left: 20px;
  top: 20px;
  min-height: 63px;
  min-width: 165px;
  height: 63px;
  width: 165px;
}

清理您的HTML，如下所示（假设您稍后使用.images代码关闭</div>）：

<div class="images">
  <a href="https://www.csgolive.com/affiliates">
    <img src="https://placehold.it/200x200" alt="">
  </a>

大小（红色边框和.images高度仅供参考）：

Answer 3

如果你使用position：absolute，你必须添加position：relative;到你的父容器。