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

Question

在第一个图像，你可以看到标志正确定位，但是当我改变分辨率：

但是当你尝试在不同的分辨率它得到开箱：

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

<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>

Answer 1

要应用不同的样式当分辨率高于或低于某一阈值，则需要使用@media查询在你的CSS。

您可以包括有条件的文件是这样的：

<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

，如果你使用的位置是：绝对的，你必须添加的位置是：相对的;到您的父容器。