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