HTML / CSS图像叠加

Question

在网站上实现“播放视频”功能。 每个视频内容项可以具有不同的图像。 这些图像中的每个图像都将具有相同的宽度，但是高度可能不同（在上载时会调整它们的大小，以保持宽高比以满足标准宽度要求）。

计划是使用如下标记在内容图像上方显示另一个透明的“播放按钮”图像：

            <div class="media">
                <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
                    <img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
                </a>
            </div>

这非常类似于渠道9在其主页上执行此操作的方式。 但是，这似乎是假设任何图像的高度和宽度都是标准的。 有其他解决方法吗？

本来忘了提。 我们有一个可以适应的预定义宽度，但是每个图像可能具有不同的高度。 例如，需要使用相同的标记来支持以下图像：

宽x高400 x 200400 X 300400 X 400

播放按钮需要在每个图像中居中。

Answer 1

代替内部元件作为一个的<img>则可以使它一个<div>与PLAYBUTTON作为背景图像，位于中央的样式。

<div class="media">
  <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
    <div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
  </a>
</div>

您仍然需要知道缩略图的大小，因为您仍然需要为div提供高度和宽度-由于要将缩略图显示为背景图像，因此无法框会自动缩放到合适的大小。 但是至少现在您的代码可以设置高度和宽度的值，而不必担心播放按钮的形状变形。

（注意：播放按钮作为背景图片可能应该在单独的样式表中，而不是按照我的示例声明为内联；我这样做是为了演示它与原始代码的不同之处，而不是为了展示最佳做法）

Answer 2

需要一些CSS来确保一切正常，但这可以帮助您：

.media { 
    display: table; 
}
.media img { 
    display: table-cell; 
    vertical-align: middle; 
    display: block; 
    margin: 0 auto; 
}

如果没有，请添加您的CSS，这样我就可以摆弄它并实现它。

Answer 3

我会这样

<div class="media">
    <a class="videoLink" href="#"></a>
    <img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>

将缩略图与链接分开。 我们希望链接显示在图像的顶部，并且图像要拉伸<div class="media">的高度。

CSS：

.media {
    position: relative;
}

.videoLink {
    display: block;
    height: 100%;
    width: 100%;

    background-image: url(PlayButton.png);
    background-position: center center;

    position: absolute;
    z-index: 2;
}