如何针的图像到另一幅图像的CSS

我有这样的代码：如何针的图像到另一幅图像的CSS

<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不移动/全屏图像调整大小，并移动到矩形背景之外。

我玩过它使它绝对和相对，但我似乎没有接近，有什么想法吗？

来源

2014-06-07 user1547410

的jsfiddle请 –

你为什么不使用背景图片呢？ –

哪个尺寸有你的gif图像？ –

你可以这样做：

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 */; 
}

来源

2014-06-07 12:01:32

如何针的图像到另一幅图像的CSS

回答

相关问题