Question

我有一个空心的图像。我想在这张空图像的正中间放置旋转图像。

请看一下：http://www.prezzio.net/

问题是当页面调整大小时图像也会调整大小并且旋转图像不再位于图像的空白区域。我不知道这是否可行但我想让旋转的图像始终位于图像的空（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规则来根据窗口大小更改内容。例如，对于最大宽度为800px的窗口，您可以定义：

@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>;
    }
}

当然，更好的方法是为您的图片（div）设置一个可自动恢复的容器position: relative;和max-width: <the width of your image>;然后将内容放在其中。

根据页面大小定位图像

2 个答案: