1

2 つの画像を重ね合わせようとしていますが、どちらも高さとサイズに対応する必要があります (つまり、親 DIV は固定サイズではありません (具体的にはサムネイル上の再生ボタン)。

例...

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

通常、.img-wrap で高さ、幅、位置を相対的に設定してから、.play-button と .thumb-image の絶対位置と z-index を設定して、再生ボタンの画像がサムネイルの上にうまく収まるようにします。

私が抱えている問題は、サムネイルがレスポンシブであるため、.img-wrap の高さと幅を設定できないことです。z-index を OK に設定することはできますが、高さを設定しないと、下のすべてが絶望的に​​なります。

これに対する修正はありますか？

4

1 に答える 1

0

次の手法を使用します。

<!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-27T01:48:17.267 に答える