HTML / CSS图像叠加

Question

Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).

The plan was to display another transparent "play button" image over top of the content image using markup like this:

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

This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?

Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:

W x H 400 x 200 400 X 300 400 X 400

The Play button needs to be centered in each image.

Answer 1

Instead of the inner element being an <img> , you could make it a <div> , styled with the playbutton as the background image, positioned in the center.

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

You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.

(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)

Answer 2

Need some your CSS to make sure things work, but this may help you:

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

If not, please add you CSS so I can Fiddle it and make it happen.

Answer 3

I'd do it like this.

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

Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media"> .

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