如何在不同分辨率下使圖像不能從位置移動？

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

，如果你使用的位置是：絕對的，你必須添加的位置是：相對的;到您的父容器。