根據頁面大小定位圖像

Question

我有一個空心的圖像。我想在這張空白圖像的中間放置一張旋轉圖像。

請看看這裏：http://www.prezzio.net/

問題是，當頁面大小的圖像也調整大小和旋轉圖像，沒有更多的在圖像的空白區域positionned。我不知道這是否可行，但我希望將旋轉圖像始終定位在圖像的空白（cicle）中。也許通過在旋轉圖像上使用頂部，左側，百分比寬度來玩？

可能嗎？

Answer 1

你的紡紗圖形具有

.spin { 
position:absolute; 
top: 29%; 
left: 33% 
} 

但如果圖像不調整大小（它不是），你需要給它絕對top和left座標（和尺寸），而非相對：

.spin { 
position:absolute; 
top: 260px; 
left: 425px; 
width:196px; 
height:200px; 
} 

Answer 2

你可以使用CSS @media規則來改變取決於窗口大小的事情。例如，對於Windows多達800像素寬，你可以定義：

@media screen and (max-width: 800px) { /* up to 800px wide */ 
    #myimage { 
     position: absolute; 
     top: 29%; 
     right: 33%; 
    } 
} 

@media screen and (min-width: 801px) { /* 801px and above */ 
    #myimage { 
     position: absolute; 
     top: <another value>; 
     right: <another value>; 
    } 
} 

當然，更好的辦法是用position: relative;和max-width: <the width of your image>;然後位置裏面的東西有一個autoresizable容器的圖像（div）它絕對。