无论浏览器(重新)大小如何,我都希望实现以下效果:
图像被设置为灵活的,因此,每个图像都作为最大宽度声明为: 100%。
CSS:
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 22.508038585209%;
}
有人可以指出一些方向,或者说出一些常用的技术来叠加两个图像,同时保持它们绝对居中,而不管视口(viewport)宽度如何?
最佳答案
一种常用的技术是将top
和left
设置为50%
,并设置margin-top
和margin-left
图片的 height
和 width
的负一半。
试试这个:
.play-video {
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -97px;
}
工作 JSFiddle 示例:http://jsfiddle.net/rgdrqbg4/1/
更新
您还可以将top
、left
、right
和bottom
设置为0
并将 margin
设置为 auto
以自动计算使图像居中所需的边距。
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
工作 JSFiddle 示例:http://jsfiddle.net/rgdrqbg4/5/
这仅在内部图像小于包裹它的图像时才有效。
更新
您正在为 .home-video
设置 width
。在视口(viewport)中的某个点,容器的宽度比图像的宽度大,因此黑框根据容器而不是父图像居中。要使 .home-video
容器与其较大的图像具有相同的 width
,您可以使用以下方法:
我向黑框添加了 30%
的 width
,这样它也可以随着较大的图像缩小。
.home-video{
display: inline-block;
}
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 30%;
margin: auto;
}
然后移除你之前设置的width
。
工作 JSFiddle 示例:工作 JSFiddle 示例:http://jsfiddle.net/rgdrqbg4/9/
关于css - 如何使用 CSS 将一个图像置于另一个图像之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25978937/