根据页面大小定位图像

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）它绝对。