如何使用CSS将图像置于另一个图像的顶部？

Question

无论浏览器（重新）大小，我希望达到以下效果：

图像设置为灵活，因此，每个图像的最大宽度声明为： 100％。

http://jsfiddle.net/rgdrqbg4/

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

有人可以指出一些方向，或者说出一些常用的技术来覆盖两个图像，同时保持它们的绝对居中，无论视口宽度如何？

Answer 1

一种常见的技巧是将top和left设置为50%，并将margin-top和margin-left设置为height的负半部分{ {1}}你的形象。

试试这个：

width

使用JSFiddle示例：http://jsfiddle.net/rgdrqbg4/1/

<强>更新

您还可以将.play-video { position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -97px; } ，top，left和right设置为bottom，并将0设置为margin它可以自动计算图像居中所需的边距。

auto

使用JSFiddle示例：http://jsfiddle.net/rgdrqbg4/5/

这仅在内部图像小于包裹图像的情况下才有效。

<强>更新

您为.play-video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } 设置了width。在视口中的某个点，容器的宽度大于图像的宽度，因此黑盒的中心是容器，而不是父图像。要使.home-video容器与其较大的图像具有相同的.home-video，您可以使用此功能：

我在黑框中添加了width width，因此它也可以缩小图片。

30%

然后移除您之前设置的.home-video{ display: inline-block; } .play-video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 30%; margin: auto; } 。

使用JSFiddle示例：使用JSFiddle示例：http://jsfiddle.net/rgdrqbg4/9/

Answer 2

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: 25.508038585209%;
    width: 34%;
    height: 40%;
}

<div class="home-video">
    <img class="video-placeholder" src="http://lorempixel.com/570/320/" alt="video"/>
    <img class="play-video" src="http://lorempixel.com/194/180/cat/" alt="play this video"/>
</div>

Answer 3

你是说这个意思吗？你走在正确的轨道上。

.play-video { position: absolute; top:20%; height:inherit; left:28%; width:40%; margin:0 auto; }

http://jsfiddle.net/rgdrqbg4/7/