无论屏幕大小如何,如何使项目与背景对齐?

时间:2019-03-13 09:02:24

标签: android ios css sass mendix

我正在处理一个带有长条可滚动背景图像的页面。该页面主要用于移动设备。我需要根据背景对齐几个项目(包含文本和图像的容器),以使这些项目位于道路上的某些点附近。

问题是我的背景图像的宽度和高度根据移动设备的屏幕而变化,而这些项目保留了它们的位置,因此不再与道路对齐。

如何使用SASS / CSS解决此问题?

1 个答案:

答案 0 :(得分:0)

您可以使用vw css单位相对于屏幕宽度放置内容元素。

<div class="container">
    <div class="content">Content</div>
</div>
.container {
    background: url("//placehold.it/1500x1000") no-repeat;
    background-size: 100% auto;
    height: 1000px;
    position: relative;
}
.content {
    background: #f00;
    padding: 10px;
    position: absolute;
    left: 48vw;
    top: 35vw;
}

签出此密码笔-> https://codepen.io/moorthy-g/pen/bZYyza