我在寻找一种方法,让两个div始终放在同一个地方,不管访客的分辨率如何不同。所以,我使用一个背景图像,它的大小是固定的(所以它总是在每个分辨率上完全显示),我希望在一个特定的地方放置2个div,不管分辨率是什么。
例如,如果我使用马里奥背景(例如this one),我想在管道上放置一个piranha,因此在每种分辨率下它总是在管道上。
有办法吗?
最佳答案
通常,您可以使用与viewport相关的单位vw
和vh
将内容粘贴到页面的同一部分,而不管分辨率如何。下面是一个例子,说明如何将pirahna设备放置在完全相同的位置(在后台的管道顶部),而不考虑屏幕分辨率。
CSS:
html, body {
margin: 0;
overflow: hidden;
}
body {
background: url(https://i.imgur.com/goKnXzJ.png);
background-size: 100%;
}
#plant {
position: absolute;
left: 83vw;
top: 30vw;
}
#plant img {
height: 10vw;
}
HTML格式:
<div id="plant">
<img src="http://img2.wikia.nocookie.net/__cb20120501175714/fantendo/images/b/b0/Paper_Piranha_Plant.png" />
</div>
这是一个工作的jsfiddle-您可以调整窗格的大小并看到位置不变:https://jsfiddle.net/yu2o0fpt/