Question

正如您所看到的，我将图像设置为响应式，因此在重新调整浏览器大小时它会相应地延伸，因此图像适合并保持其比率。这就是我想要的。我不想要的是音乐播放器与图像重叠。

我也希望他们的位置保持原样，居中，并且彼此相邻。

我试图寻找解决方案，但我发现的一切都处于不同的条件下并没有帮助。我确定这是一个愚蠢的简单修复，我无法绕过它。 http://jsfiddle.net/6ML3s/

HTML

<body>

<img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false"/>

<div class="player"><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" /></div>

</body>

CSS

body {
    background-color:#B1ACA9;
}
.bg {
    height:91%;
    position: absolute;
    bottom: 0;
    right: 25%;
    z-index: -1;
}
.player {
    position:absolute;
    top:50%;
    left:40%;
    z-index:99999;
}

Answer 1

试试这个：http://jsfiddle.net/lotusgodkk/6ML3s/2/

HTML：

<div class="container">
    <div>
        <img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false" />
    </div>
    <div class="player">
        <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" />
    </div>
</div>

CSS：

.container {
    width:100%;
    height:300px;
    display:table;
}
.container div {
    display:table-cell;
    width:49%;
    vertical-align:middle;
}
.container div img {
    max-width:100%;
}

将您的代码包装在div中，将图像包装在div中。我使用width:49%但您可以根据您的使用和要求进行调整。

在重新调整浏览器大小时，我有两个重叠的div

1 个答案: