サイズで応答性のある（固定ではない）2つのイメージのCSS位置絶対、相対、およびZインデックスを使用する

2つのイメージをオーバーレイしようとしていますが、両方とも高さとサイズで応答する必要があります固定サイズ（サムネイル上に具体的再生ボタン）。サイズで応答性のある（固定ではない）2つのイメージのCSS位置絶対、相対、およびZインデックスを使用する

例...

<div class="img-wrap"> 
    <div class="play-button">Play Button Img</div> 
    <div class="thumb-image">Thumbnail Video Image</div> 
</div>

通常私は.IMGラップ上の高さ、幅および位置を設定し、位置の絶対およびz設定します.play-buttonと.thumb-imageのインデックスを使用して、再生ボタンの画像をサムネイルにうまく収めることができます。

問題はサムネイルが反応的なので、.img-wrapの高さと幅を設定できないことです。私はまだ彼がz - インデックスOKを設定することができますが、高さを設定せずに、下のすべてがそれの下で絶望的です。

これに修正がありますか？

おかげ - ジャック

出典

2012-04-24 Jack Barham

スクリーンショットで問題をアップロードできますか？どこに問題があるの？ –

あなたはこれが好きですか？ http://jsfiddle.net/pPQsg/3/ –

使用以下の技術：

<!doctype html> 
<html> 
<head> 
<title>Responsive Nested Images</title> 
<meta charset="utf-8"> 
</head> 
<style> 
    .play-button, .thumb-image 
     { 
     position: absolute; /* Absolutely position both containers */ 
     font-size:0; /* Hide text */ 
     line-height:0; 
     } 
    .play-button { outline: 1px solid red; } /* Add outline for debugging */ 
    .thumb-image { top:50%; left: 50%; outline: 1px solid green; } /* Responsive Container */ 
    .play-button img, .thumg-image img { max-width: 100%; height: auto; } /* Responsive Image Dimensions */ 
</style> 
</head> 
<body> 
    <div class="play-button"><img src="http://www.stackoverflow.com/favicon.ico"> 
     <div class="thumb-image">Thumbnail Video Image<img src="http://www.stackoverflow.com/favicon.ico"></div> 
     Play Button Img 
    </div> 
</body> 
</html>

参照

出典

2013-11-27 01:48:17

サイズで応答性のある（固定ではない）2つのイメージのCSS位置絶対、相対、およびZインデックスを使用する

答えて

関連する問題