我目前正在开发一个网站,用户应该能够在其中水平滚动浏览一个带有可点击信息点的景观。为了确保网站完全响应式,我想把我的景观图片和信息点放在一个与图片大小完全相等的容器中。
我的CSS在浏览器窗口高度改变时完全正常,然而信息点会移动到错误的位置...但是当您刷新调整大小后的网站时,它又能正常工作了。
试一下:Fiddle(调整输出,然后再次点击“运行”)。
在我的真实项目中,我使用JavaScript将容器的宽度设置为图像的宽度,但我很想有一个干净的CSS解决方案。
我知道有类似的问题,但是没有一个建议的解决方案适合我。
提前感谢您!
HTML:
<div id="container-main">
<div id="landscape">
<img class="background" src="image.jpg" />
<div class="point" style="top: 24%; left: 7.5%;"></div>
<div class="point" style="top: 29%; left: 17.7%;"></div>
<div class="point" style="top: 77%; left: 39%;"></div>
<div class="point" style="top: 26%; left: 68%;"></div>
<div class="point" style="top: 70%; left: 80%;"></div>
</div>
</div>
CSS:
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
height: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
我的CSS在浏览器窗口高度改变时完全正常,然而信息点会移动到错误的位置...但是当您刷新调整大小后的网站时,它又能正常工作了。
试一下:Fiddle(调整输出,然后再次点击“运行”)。
在我的真实项目中,我使用JavaScript将容器的宽度设置为图像的宽度,但我很想有一个干净的CSS解决方案。
我知道有类似的问题,但是没有一个建议的解决方案适合我。
提前感谢您!