对于响应（不固定）大小的2个图像，使用CSS位置absolute，relative和z-index [英] Using CSS position absolute, relative and z-index for 2 images which are responsive (not fixed) in size
问题描述
我尝试叠加2张图片，但他们都需要在高度和尺寸上做出响应（即父级DIV不是固定尺寸（特别是缩略图上的播放按钮）。
示例...
< div class =img-wrap>
< div class =play-button>播放按钮Img< / div>
< div class =thumb-image>缩略图视频图片< / div>
< / div ;
通常我会设置相对于.img-wrap的高度，宽度和位置，然后设置位置绝对和.play-button和.thumb-image的z-index，以允许播放按钮图像正好位于缩略图上。
我遇到的问题是缩略图响应，所以我无法设置的高度和宽度.img包装。我仍然可以设置他的z索引确定，但没有设置高度下面的一切是绝望的。
这是否有修复？
感谢 - 杰克
使用以下技术：
<！doctype html&
< html>
< head>
< title>响应嵌套图片< / title>
< meta charset =utf-8>
< / head>
< style>
.play-button，.thumb-image
{
position：absolute; / *绝对定位两个容器* /
font-size：0; / *隐藏文本* /
line-height：0;
}
.play-button {outline：1px solid red; } / *添加调试大纲* /
.thumb-image {top：50％;左：50％;轮廓：1px纯绿色; } / *响应容器* /
.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>缩图视频图像< img src =http://www.stackoverflow.com/favicon.ico>< / div>
播放按钮图片
< / div>
< / body>
< / html>
参考
I am trying to overlay 2 images but they both need to be responsive in height and size (i.e. the parent DIV is not a fixed size (specifically a play button over a thumbnail).
Example...
<div class="img-wrap">
<div class="play-button">Play Button Img</div>
<div class="thumb-image">Thumbnail Video Image</div>
</div>
Normally I would set height, width and position relative on .img-wrap and then set position absolute and z-index of .play-button and .thumb-image to allow the play button image to sit nicely over the thumbnail.
The problem I have is the thumbnail is responsive so I am unable to set the height and width of .img-wrap. I can still sett he z-index OK but without setting a height everything below is despairing underneath it.
Is there is a fix to this?
Thanks - Jack
Use the following technique:
<!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>
References
这篇关于对于响应（不固定）大小的2个图像，使用CSS位置absolute，relative和z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
