个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
我有这个代码:
<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 不会随着全屏图像移动/调整大小并移动到矩形背景之外。
我试过让它成为绝对和相对的，但我似乎并没有接近，有什么想法吗？
最佳答案
你可以这样做:
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 */;
}
关于html - 如何将图像固定到另一个图像 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24096873/
27
4
0
我是一名优秀的程序员,十分优秀！