Question

我有这段代码：

<body style="margin:0; padding:0;">
    <div style="position: relative; left:0; top:0;">

        <img src="images/fullscreen.png" style="max-width: 100%; width: 100%; height:auto; position: relative; top:0; left:0;"/>
        <img src="images/smaller_animated.gif" style="position:absolute; top:140px; left:458px;"/>
    </div>
</body>

fullscreen.png是一个大型全屏图像。我做了它的响应，所以如果你使浏览器宽度减少，它不会滚动而是调整大小。

现在我有一个动画gif，我想放在全屏图像的区域内。基本上在全屏图像中有一个大矩形灰色背景，我想将动画gif固定到该空间的中心。除了当我调整窗口大小，然后gif不会移动/调整全屏图像并移动到矩形背景之外时，它工作正常。

我玩过绝对和亲戚，但我似乎没有接近，任何想法？

Answer 1

你可以这样做：

HTML：

<div id="fullscreen" align="center">
 <img class="center_image" src="images/smaller_animated.gif"/>
</div>

CSS：

#fullscreen {
    background: url(images/fullscreen.png) red;
    background-size: 100% 100%;
    max-width: 100%; 
    width: 100%; 
    height: 100%;
    position: absolute;    
    top: 0;
    left: 0;
}
.center_image {
    position: absolute;
    top: calc(50% - /* halve your height of image */);
    height: /* height of your image */;
    width: /* width of your image */;
}

如何将图像固定到另一个图像css上

1 个答案: