Question

我有一个页面显示一个地图，其中一些引脚放在感兴趣的地方。标记和样式如下：

HTML：

<div class="map">
  <div class="pins">
    <a href="#">Pin #1</a>
    ...
    <a href="#">Pin #12</a>
  </div>

CSS：

.map {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent url([image]) no-repeat 50% 50%;
  background-size: cover;
}

.pins {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
{

.pins > a {
  width: 20px;
  height: 31px;
  position: absolute;
}

我的问题是：如何保持我的针脚在地图上的特定位置绝对定位，与地图正确对齐？我尝试使用百分比值来确定针位置，但由于地图始终居中，因此一旦地图开始在侧面裁剪，对齐就会消失。

我意识到我可以实现JS修复，但我想知道是否有纯HTML / CSS解决方案。

感谢。

Answer 1

我喜欢你的问题！

那么背景大小的封面是保持图像的视角。这样您就不知道图像的显示尺寸如何。执行你首先知道比率。

我用fluid-video-padding-bottom "hack"做了一些实验。想象一下16/9的地图。
您所需要的只是一个精确放置在图像顶部的容器（或它可能与我的示例中的容器完全相同）并且行为与背景大小的封面相同。使用padding-bottom技巧实现。剩下要做的就是相应地调整引脚大小。（我使用基于视口的单位）

My example

padding-bottom: 56.25%; /* 16:9 */

您可以使用对象适合定位，而不是使用填充底部技巧。尚未得到很好的支持。

将元素固定到背景大小的div：cover

1 个答案: